// 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;

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

.color-info {
  --detach-icon-foreground-color: none;

  display: grid;
  flex: 1;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: $s-2;
  border-radius: $s-8;
  background-color: var(--input-details-color);
  height: $s-32;

  &:hover {
    --detach-icon-foreground-color: var(--input-foreground-color-active);

    .detach-btn,
    .select-btn {
      background-color: transparent;
    }
  }
}

.color-name-wrapper {
  @extend .input-element;
  flex-grow: 1;
  width: 100%;
  min-width: 0;
  border-radius: $br-8 0 0 $br-8;
  padding: 0;
  margin-inline-end: 0;
  gap: $s-4;

  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  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;
    display: flex;
    align-items: center;
    &:hover {
      background-color: transparent;
    }
  }
  .color-name {
    @include bodySmallTypography;
    @include textEllipsis;
    padding-inline: $s-6;
    border-radius: $br-8;
    color: var(--input-foreground-color-active);
  }
  .detach-btn {
    @extend .button-tertiary;
    height: $s-28;
    width: $s-28;
    margin-inline-start: auto;
    border-radius: 0 $br-8 $br-8 0;
    display: none;
  }
  .detach-icon {
    @extend .button-icon;
    stroke: var(--detach-icon-foreground-color);
  }
  .color-input-wrapper {
    @include bodySmallTypography;
    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 {
    --detach-icon-foreground-color: var(--input-foreground-color-active);

    background-color: var(--input-background-color-hover);
    border: $s-1 solid var(--input-border-color-hover);
    .color-bullet-wrapper,
    .color-name,
    .detach-btn,
    .color-input-wrapper {
      background-color: var(--input-background-color-hover);
    }
    .detach-btn {
      display: flex;
    }
    &.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-focus);
      border: $s-1 solid var(--input-border-color-focus);
    }
  }

  &:focus,
  &:focus-within {
    background-color: var(--input-background-color-focus);
    border: $s-1 solid var(--input-border-color-focus);
    &:hover {
      background-color: var(--input-background-color-hover);
      border: $s-1 solid var(--input-border-color-focus);
    }
  }

  &.editing {
    background-color: var(--input-background-color-active);
    &:hover {
      border: $s-1 solid var(--input-border-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-inline-end: $s-4;
    margin-block-start: $s-2;
  }
}

.remove-btn,
.select-btn {
  @extend .button-tertiary;
  height: $s-32;
  width: $s-28;
  svg {
    @extend .button-icon;
  }
}
