@layer components {
  .float_color_picker {
    position: relative;
    height: 22px;
    .preview {
      height: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: var(--spacing-xs);
      z-index: 25;
      .preview_block {
        height: 100%;
        aspect-ratio: 16 / 9;
        border-radius: var(--border-radius-xxs);
        border: 1px solid var(--color-border);
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: var(--font-size-xs);
      }
    }
    .picker {
      position: absolute;
      top: calc(100% + 4px);
      padding: var(--spacing-s) var(--spacing-s);
      border-radius: var(--border-radius-xxs);
      border: 1px solid var(--color-border);
      background-color: var(--color-bg);
      box-shadow: 2px 0 8px oklch(from var(--color-black) l c h / 65%);
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: var(--spacing-s);
      z-index: 260;
      .btns {
        display: flex;
        flex-direction: row-reverse;
        gap: var(--spacing-xs);
      }
    }
  }
}