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

@layer payload-default {
  .collapsible {
    position: relative;
    --toggle-pad-h: #{base(0.75)};
    --toggle-pad-v: #{base(0.6)};

    border-radius: $style-radius-m;

    &__toggle-wrap {
      position: relative;
      padding: base(0.4) base(0.4) base(0.4) base(0.8);
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--theme-elevation-50);
      line-height: base(1.2);
      gap: base(0.2);
      border-top-right-radius: $style-radius-m;
      border-top-left-radius: $style-radius-m;
      width: 100%;

      &:not(.toggle-disabled):hover {
        background: var(--theme-elevation-100);
      }

      &:has(.collapsible__drag) {
        padding-inline-start: base(0.4);
      }
    }

    &__drag {
      display: flex;
      opacity: 0.5;
      top: var(--toggle-pad-v);
      width: base(1.2);
      height: base(1.2);
      padding: base(0.1);

      icon {
        width: 100%;
        height: 100%;
      }
    }

    &__toggle {
      @extend %btn-reset;
      @extend %body;
      text-align: left;
      border-top-right-radius: $style-radius-m;
      border-top-left-radius: $style-radius-m;
      width: 100%;
      height: 100%;
      color: transparent;
      position: absolute;
      top: 0;
      left: 0;

      &:not(.toggle-disabled) {
        cursor: pointer;
      }

      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);
        }
      }
    }

    &--style-error {
      border: 1px solid var(--theme-error-400);
      > .collapsible__toggle-wrap {
        background-color: var(--theme-error-100);

        &:hover {
          background: var(--theme-error-150);
        }

        .row-label {
          color: var(--theme-error-950);
        }
      }
    }

    &__header-wrap {
      top: 0;
      right: base(3);
      bottom: 0;
      left: 0;
      pointer-events: none;
      width: 100%;
      overflow: hidden;
      max-width: 100%;
    }

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

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

    &__actions-wrap {
      pointer-events: none;
      display: flex;
      gap: base(0.2);
      margin-inline-end: base(0.2);
    }

    &__actions {
      pointer-events: all;
      display: flex;
      align-items: center;
      justify-content: center;
      width: base(1.2);
      height: base(1.2);

      &.icon {
        padding: base(0.1);
      }
    }

    &__indicator {
      display: flex;
      align-items: center;
      justify-content: center;
      width: base(1.2);
      height: base(1.2);

      &.icon {
        padding: base(0.1);
      }
    }

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

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