@import '../../../scss/styles.scss';

.collapsible {
  --toggle-pad-h: #{base(0.75)};
  --toggle-pad-v: #{base(0.5)};

  border-radius: $style-radius-m;

  &__toggle-wrap {
    position: relative;
  }

  &__drag {
    opacity: 0.5;
    position: absolute;
    z-index: 1;
    top: var(--toggle-pad-v);
    left: base(0.5);
  }

  &__toggle {
    @extend %btn-reset;
    @extend %body;
    text-align: left;
    cursor: pointer;
    border-top-right-radius: $style-radius-s;
    border-top-left-radius: $style-radius-s;
    width: 100%;
    color: transparent;

    span {
      user-select: none;
    }
  }

  &--style-default {
    border: 1px solid var(--theme-elevation-200);
    &:hover {
      border: 1px solid var(--theme-elevation-300);
    }

    > .collapsible__toggle-wrap {
      .row-label {
        color: var(--theme-text);
      }
      .collapsible__toggle {
        background: var(--theme-elevation-50);
      }
    }
    &.collapsible--hovered {
      > .collapsible__toggle-wrap .collapsible__toggle {
        background: var(--theme-elevation-100);
      }
    }
  }

  &__toggle,
  &__header-wrap {
    padding: var(--toggle-pad-v) var(--toggle-pad-h);
  }

  &__header-wrap {
    position: absolute;
    top: 0;
    right: base(3);
    bottom: 0;
    left: 0;
    pointer-events: none;

    > * {
      pointer-events: all;
    }
  }

  &__header-wrap--has-drag-handle {
    left: base(0.875);
  }

  &--collapsed {
    .collapsible__toggle {
      border-bottom-right-radius: $style-radius-s;
      border-bottom-left-radius: $style-radius-s;
    }
  }

  &__actions-wrap {
    position: absolute;
    right: var(--toggle-pad-h);
    top: var(--toggle-pad-v);
    pointer-events: none;
    display: flex;
  }

  &__actions {
    pointer-events: all;
  }

  &__indicator {
    padding: calc(var(--base) / 4);
    display: flex;
    align-items: flex-start;
  }

  &__content {
    background-color: var(--theme-elevation-0);
    border-bottom-left-radius: $style-radius-s;
    border-bottom-right-radius: $style-radius-s;
    padding: var(--base);
  }

  @include small-break {
    &__content {
      padding: var(--gutter-h);
    }
  }
}

html[data-theme='dark'] {
  .collapsible {
    &--style-error {
      border: 1px solid var(--theme-error-400);
      &:hover {
        border: 1px solid var(--theme-error-500);
      }

      > .collapsible__toggle-wrap {
        .row-label {
          color: var(--theme-error-500);
        }
        .collapsible__toggle {
          background: var(--theme-error-100);
        }
      }
      &.collapsible--hovered {
        > .collapsible__toggle-wrap .collapsible__toggle {
          background: var(--theme-error-150);
        }
      }
    }
  }
}

html[data-theme='light'] {
  .collapsible {
    &--style-error {
      border: 1px solid var(--theme-error-500);
      &:hover {
        border: 1px solid var(--theme-error-600);
      }

      > .collapsible__toggle-wrap {
        .row-label {
          color: var(--theme-error-750);
        }
        .collapsible__toggle {
          background: var(--theme-error-50);
        }
      }
      &.collapsible--hovered {
        > .collapsible__toggle-wrap .collapsible__toggle {
          background: var(--theme-error-100);
        }
      }
      &.error {
        & input {
          border-color: var(--theme-error-500);
        }
      }
    }
  }
}