// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC

@import "refactor/common-refactor.scss";

.color-data {
  @include flexRow;
  .color-info {
    display: flex;
    align-items: center;
    gap: $s-2;
    border-radius: $s-8;
    background-color: var(--input-details-color);
    height: $s-32;
    width: 100%;
    flex-grow: 1;
    .color-name-wrapper {
      @extend .input-element;
      flex-grow: 1;
      width: 100%;
      border-radius: $br-8 0 0 $br-8;
      padding: 0;
      margin-right: 0;
      gap: $s-4;
      input {
        padding: 0;
      }
      .color-bullet-wrapper {
        height: $s-28;
        padding: 0 $s-2 0 $s-8;
        border-radius: $br-8 0 0 $br-8;
        background-color: transparent;
        &:hover {
          background-color: transparent;
        }
      }
      .color-name {
        @include titleTipography;
        display: flex;
        align-items: center;
        height: $s-28;
        padding-left: $s-6;
        border-radius: $br-8;
        width: 100%;
        flex-grow: 1;
        color: var(--input-foreground-color-active);
      }
      .detach-btn {
        @extend .button-tertiary;
        height: $s-28;
        width: $s-28;
        border-radius: 0 $br-8 $br-8 0;
        display: none;
        svg {
          @extend .button-icon;
        }
      }
      .color-input-wrapper {
        @include titleTipography;
        display: flex;
        align-items: center;
        height: $s-28;
        padding: 0 $s-0;
        width: 100%;
        margin: 0;
        flex-grow: 1;
        background-color: var(--input-background-color);
        color: var(--input-foreground-color);
        border-radius: $br-0;
      }
      &.no-opacity {
        border-radius: $br-8;
        .color-input-wrapper {
          border-radius: $br-8;
        }
      }
      &:hover {
        background-color: var(--input-background-color-hover);
        border: $s-1 solid var(--input-background-color-hover);
        .color-bullet-wrapper,
        .color-name,
        .detach-btn,
        .color-input-wrapper {
          background-color: var(--input-background-color-hover);
        }
        .detach-btn {
          display: flex;
          svg {
            stroke: var(--input-foreground-color-active);
          }
        }
        &.editing {
          background-color: var(--input-background-color-active);
          .color-bullet-wrapper,
          .color-name,
          .detach-btn,
          .color-input-wrapper {
            background-color: var(--input-background-color-active);
          }
        }
      }
      &:focus,
      &:focus-within {
        background-color: var(--input-background-color-active);
      }

      &.editing {
        background-color: var(--input-background-color-active);
      }
    }
    .gradient-name-wrapper {
      border-radius: 0 $br-8 $br-8 0;
      .color-name {
        @include flexRow;
        border-radius: 0 $br-8 $br-8 0;
      }
    }
    .library-name-wrapper {
      border-radius: $br-8;
    }
    .opacity-element-wrapper {
      @extend .input-element;
      width: $s-60;
      border-radius: 0 $br-8 $br-8 0;
      .opacity-input {
        padding: 0;
        border-radius: 0 $br-8 $br-8 0;
        min-width: $s-28;
      }
      .icon-text {
        @include flexCenter;
        height: $s-32;
        margin-right: $s-4;
        padding-top: $s-2;
      }
    }

    &:hover {
      .detach-btn,
      .select-btn {
        background-color: transparent;
        svg {
          stroke: var(--input-foreground-color-active);
        }
      }
    }
  }
  .remove-btn,
  .select-btn {
    @extend .button-tertiary;
    height: $s-32;
    width: $s-28;
    svg {
      @extend .button-icon;
    }
  }

  &.dnd-over-top {
    border-top: $s-1 solid var(--layer-row-foreground-color-drag);
  }
  &.dnd-over-bot {
    border-bottom: $s-1 solid var(--layer-row-foreground-color-drag);
  }
}
