// 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";
.element-set {
  margin: 0;
  padding-top: $s-8;
}

.element-content {
  @include flexColumn;
}

.title-back {
  @include uppercaseTitleTipography;
  display: flex;
  align-items: center;
  gap: $s-4;
  width: 100%;
  height: $s-32;
  padding: 0;
  border: 0;
  border-radius: $br-8;
  background-color: var(--title-background-color);
  color: var(--title-foreground-color);
  cursor: pointer;
}

.icon-back {
  @include flexCenter;
  width: $s-12;
  height: 100%;
  svg {
    height: $s-12;
    width: $s-12;
    stroke: var(--icon-foreground);
    transform: rotate(180deg);
  }
}

.component-wrapper {
  width: 100%;
  min-height: $s-32;
  border-radius: $br-8;

  &.with-actions {
    display: grid;
    grid-template-columns: 1fr $s-28;
    gap: $s-2;
  }

  &.without-actions {
    padding-right: 0.5rem;
    .component-name-wrapper {
      width: 100%;
      border-radius: $br-8;
    }
  }
}

.component-name-wrapper {
  @include buttonStyle;
  cursor: default;
  display: grid;
  grid-template-columns: $s-12 1fr;
  gap: $s-4;
  padding: 0 $s-8;
  border-radius: $br-8 0 0 $br-8;
  background-color: var(--assets-item-background-color);
  color: var(--assets-item-name-foreground-color-hover);
  &:hover {
    background-color: var(--assets-item-background-color-hover);
    color: var(--assets-item-name-foreground-color-hover);
  }
}

.component-icon {
  @include flexCenter;
  height: $s-32;
  width: $s-12;
  svg {
    @extend .button-icon-small;
    stroke: var(--icon-foreground);
  }
}

.name-wrapper {
  @include flexColumn;
  min-height: $s-32;
  padding: $s-8 0 $s-8 $s-2;
  border-radius: $br-8 0 0 $br-8;
  overflow: hidden;
}

.component-name {
  @include bodySmallTypography;
  @include textEllipsis;
  direction: rtl;
  text-align: left;
  min-height: $s-16;
}

.component-name-inside {
  direction: ltr;
  unicode-bidi: bidi-override;
}

.component-parent-name {
  @include bodySmallTypography;
  @include textEllipsis;
  direction: rtl;
  text-align: left;
  min-height: $s-16;
  max-width: $s-184;
  color: var(--title-foreground-color);
}

.component-actions {
  position: relative;
}

.menu-btn {
  @extend .button-tertiary;
  height: 100%;
  width: $s-28;
  border-radius: 0 $br-8 $br-8 0;
  background-color: var(--assets-item-background-color);
  color: var(--assets-item-name-foreground-color-hover);
  svg {
    @extend .button-icon;
    min-height: $s-16;
    min-width: $s-16;
  }
  &:hover {
    background-color: var(--assets-item-background-color-hover);
    color: var(--assets-item-name-foreground-color-hover);
    &.selected {
      @extend .button-icon-selected;
    }
  }
}

.menu-btn.selected {
  @extend .button-icon-selected;
}

.copy-text {
  @include bodySmallTypography;
  height: 100%;
  display: flex;
  align-items: center;
  color: var(--title-foreground-color);
  margin-right: $s-8;
}

.swappeable {
  cursor: pointer;
}

.custom-select-dropdown {
  @extend .dropdown-wrapper;
  right: 0;
  left: unset;
  width: $s-252;
}

.not-main {
  top: $s-56;
}

.dropdown-element {
  @extend .dropdown-element-base;
}

.icon-wrapper {
  display: flex;
  svg {
    @extend .button-icon-small;
    stroke: var(--icon-foreground);
  }
}

.input-text {
  @include removeInputStyle;
  height: $s-32;
  width: 100%;
  margin: 0;
  padding: $s-4;
  border: 0;
  font-size: $fs-12;
  color: var(--input-foreground-color-active);
  &::placeholder {
    color: var(--input-foreground-color-disabled);
  }
  &:focus-visible {
    border-color: var(--input-border-outline-color-active);
  }
}

.clear-btn {
  @include buttonStyle;
  @include flexCenter;
  height: $s-16;
  width: $s-16;
  .clear-icon {
    @include flexCenter;
    svg {
      @extend .button-icon-small;
      stroke: var(--icon-foreground);
    }
  }
}

.search-icon {
  @include flexCenter;
  width: $s-12;
  margin-left: $s-8;
  svg {
    @extend .button-icon-small;
    stroke: var(--icon-foreground);
  }
}

.component-path {
  display: flex;
  align-items: center;
  gap: $s-4;
  width: 100%;
  height: $s-32;
  padding: 0;
  border: 0;
  background-color: var(--title-background-color);
  color: var(--title-foreground-color);
  cursor: pointer;
}

.back-arrow {
  @include flexCenter;
  height: $s-32;
  svg {
    height: $s-12;
    width: $s-12;
    stroke: var(--icon-foreground);
    transform: rotate(180deg);
  }
}

.path-name {
  @include bodySmallTypography;
  @include textEllipsis;
  direction: rtl;
  height: $s-32;
  padding: $s-8 0 $s-8 $s-2;
  margin-right: $s-4;
}

.component-list-empty {
  @include bodySmallTypography;
  margin: 0 $s-4 0 $s-8;
  color: $df-secondary;
}

.component-item {
  display: flex;
  align-items: center;
  margin-bottom: $s-4;
  padding-right: $s-8;
  font-size: $s-12;
  cursor: pointer;
  width: 100%;
  height: $s-44;
  border-radius: $br-8;
  background-color: var(--assets-item-background-color);
  color: var(--assets-item-name-foreground-color);

  .component-name {
    @include textEllipsis;
    width: 80%;
  }

  svg,
  img {
    background-color: var(--assets-component-background-color);
    border-radius: $br-8;
    height: $s-36;
    width: $s-36;
    margin: $s-2 $s-8 $s-2 $s-2;
  }

  .selected {
    color: var(--assets-item-name-foreground-color-hover);
  }

  &:hover {
    color: var(--assets-item-name-foreground-color-hover);
    background-color: var(--assets-item-background-color-hover);
  }

  &.disabled {
    cursor: auto;
    color: var(--assets-item-name-foreground-color-disabled);
    background-color: var(--assets-item-background-color);

    svg {
      cursor: auto;
    }
  }
}

.component-grid {
  display: grid;
  grid-template-columns: repeat(2, $s-124);
  grid-auto-rows: $s-124;
  gap: $s-4;
}

.grid-cell {
  @include flexCenter;
  place-items: center;
  flex-wrap: wrap;
  position: relative;
  padding: $s-8;
  border-radius: $br-8;
  background-color: var(--assets-component-background-color);
  overflow: hidden;
  --assets-component-current-border-color: var(--assets-component-border-color);
  border: $s-4 solid var(--assets-component-current-border-color);
  cursor: pointer;
  img {
    height: auto;
    width: auto;
    max-height: 100%;
    max-width: 100%;
    pointer-events: none;
    border: 0;
  }
  svg {
    height: 100%;
    width: 100%;
    stroke: none;
    object-fit: contain;
  }
  .component-name {
    @include bodySmallTypography;
    @include textEllipsis;
    display: none;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: $s-2;
    text-align: center;
    direction: rtl;
  }

  &:hover {
    background-color: var(--assets-item-background-color-hover);
    .component-name {
      display: block;
      color: var(--assets-item-name-foreground-color-hover);
      background: linear-gradient(to top, var(--assets-item-background-color-hover) 0%, transparent 100%);
    }
  }

  &.selected {
    --assets-component-current-border-color: var(--assets-item-border-color);
    .component-name {
      color: var(--assets-item-name-foreground-color-hover);
    }
  }

  &.disabled {
    background: var(--assets-component-background-color-disabled);
    cursor: auto;
    svg {
      cursor: auto;
    }
    .component-name {
      background: linear-gradient(
        to top,
        var(--assets-component-background-color-disabled) 0%,
        transparent 100%
      );
      color: var(--assets-item-name-foreground-color-hover);
    }
  }
}

.element-set-title {
  @include uppercaseTitleTipography;
  display: flex;
  align-items: center;
  height: $s-32;
  padding-left: $s-2;
  color: var(--title-foreground-color);
}

// Component swap

.component-swap {
  padding-top: $s-12;
}

.component-swap-content {
  @include flexColumn;
  gap: $s-16;
}

.fields-wrapper {
  @include flexColumn;
  gap: $s-4;
}

.search-field {
  display: flex;
  align-items: center;
  height: $s-32;
  border-radius: $br-8;
  font-family: "worksans", sans-serif;
  background-color: var(--input-background-color);
}

.library-name-wrapper {
  display: grid;
  grid-template-columns: 1fr auto;
}

.library-name {
  @include bodySmallTypography;
  @include textEllipsis;
  color: var(--title-foreground-color);
  padding: $s-8 0 $s-8 $s-2;
}

.swap-wrapper {
  @include flexColumn;
  gap: $s-4;
}

.listing-options-wrapper {
  width: 100%;
}

.listing-options {
  display: flex;
  align-items: center;
}

.component-group {
  @include bodySmallTypography;
  display: grid;
  grid-template-columns: 1fr $s-12;
  height: $s-32;
  cursor: pointer;

  .component-group-name {
    @include textEllipsis;
    color: var(--assets-item-name-foreground-color);
  }
  &:hover {
    color: var(--assets-item-name-foreground-color-hover);
    .component-group-name {
      color: var(--assets-item-name-foreground-color-hover);
    }
  }
}

.arrow-icon {
  @include flexCenter;
  height: $s-32;
  svg {
    height: $s-12;
    width: $s-12;
    stroke: var(--icon-foreground);
  }
}

.path-wrapper {
  display: flex;
  max-width: $s-232;
  padding: $s-8 0 $s-8 $s-2;
}

.component-group-path {
  @include textEllipsis;
  direction: rtl;
  color: var(--assets-item-name-foreground-color-rest);
}

// Component annotation

.component-annotation {
  @include bodySmallTypography;
  color: var(--entry-foreground-color);
  border-radius: $br-8;

  .annotation-title {
    display: flex;
    align-items: center;
    height: $s-32;

    &.expanded {
      border-bottom: $s-1 solid var(--entry-border-color-disabled);
    }

    &.expandeable {
      cursor: pointer;
    }

    div {
      display: flex;
      align-items: center;
      line-height: 2.5;
    }

    .icon-arrow {
      @include flexCenter;
      width: $s-28;
      height: $s-32;
      display: flex;
      margin: 0;
      padding: 0;
      cursor: pointer;
      svg {
        @extend .button-icon;
        stroke: var(--icon-foreground);
        width: $s-16;
        height: $s-16;
      }
      &.expanded svg {
        transform: rotate(90deg);
      }
    }

    .icon {
      @include flexCenter;
      width: $s-28;
      height: $s-32;
      border-radius: $br-8;
      display: none;
      margin: 0;
      padding: 0;
      cursor: pointer;

      svg {
        @extend .button-icon;
        stroke: var(--icon-foreground);
        width: $s-16;
        height: $s-16;
      }

      &.icon-tick:hover,
      &.icon-edit:hover {
        svg {
          stroke: var(--icon-foreground-accept);
        }
      }

      &.icon-tick.invalid:hover {
        cursor: default;
        svg {
          stroke: var(--icon-foreground);
        }
      }

      &.icon-cross:hover,
      &.icon-trash:hover {
        svg {
          stroke: var(--icon-foreground-discard);
        }
      }
    }

    .annotation-text {
      flex-grow: 1;
      margin-left: $s-12;
    }

    &:hover {
      .icon {
        display: flex;
      }
    }
  }

  &.editing {
    border: $s-1 solid var(--input-border-color-success);
    .annotation-title {
      border-bottom: $s-1 solid var(--entry-border-color-disabled);
      .icon {
        display: flex;
      }
    }

    textarea {
      min-height: $s-252;
    }
  }

  &.creating {
    border: $s-1 solid var(--input-border-color-success);
    .annotation-title .icon {
      display: flex;
    }
    textarea {
      min-height: $s-252;
    }
  }

  .hidden {
    display: none;
    svg {
      display: none;
    }
  }

  .counter {
    @include bodySmallTypography;
    text-align: right;
    color: var(--entry-foreground-color);
    margin: 0 $s-8 $s-8 0;
  }

  // Auto growing text
  .grow-wrap {
    // easy way to plop the elements on top of each other and have them both sized based on the tallest one's height
    display: grid;

    &:after {
      // The space is needed to preventy jumpy behavior
      content: attr(data-replicated-value) " ";
      white-space: pre-wrap;
      visibility: hidden;
    }

    textarea {
      background-color: var(--input-background-color-active);
      color: var(--input-foreground-color-active);
      padding: $s-12;

      border: none;
      overflow: hidden;
      outline: none;

      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;

      resize: none; /*remove the resize handle on the bottom right*/
    }

    textarea,
    &:after {
      /* Identical styling required!! */
      font: inherit;
      overflow-wrap: anywhere;

      padding: 10px;

      /* Place on top of each other */
      grid-area: 1 / 1 / 2 / 2;
    }
  }
}
