@use '@funidata/fudis-core' as core;

.fudis-expandable {
  border-top: 0;

  &--closed {
    border-bottom: 0;
  }

  &__regular {
    @include core.border('2px', 'solid', 'gray-extra-light');
  }

  &__header {
    display: block;
    padding: core.$spacing-xs;

    &__regular {
      @include core.bg-color('gray-extra-light');
    }

    &__heading {
      margin: 0;
      width: 100%;

      &__button {
        @include core.border-none;
        @include core.bg-color('transparent');
        @include core.expandable-regular-typography;

        display: flex;
        width: 100%;
        text-align: left;
        cursor: pointer;

        &:focus {
          @include core.focus-generic;
        }

        &__icon__regular {
          margin-right: core.$spacing-xs;
        }

        &__title {
          align-self: center;

          /* stylelint-disable-next-line max-nesting-depth */
          &__text {
            margin-right: core.$spacing-xs;
          }

          /* stylelint-disable-next-line max-nesting-depth */
          &__sub-heading {
            @include core.expandable-sub-title-typography;

            display: block;
          }
        }

        &__lite {
          @include core.link-md;
          @include core.text-color('primary');

          text-decoration: none;
        }
      }
    }

    @include core.breakpoint('sm') {
      display: flex;
    }
  }

  &__content {
    &__padding-default {
      @include core.breakpoint('md') {
        padding: core.$spacing-md;
        padding-left: core.$spacing-xl;
      }

      @include core.breakpoint-max('md') {
        padding: core.$spacing-sm;
        padding-left: core.$spacing-md;
      }
    }

    &__padding-small {
      padding: core.$spacing-sm;
    }
  }

  &-actions {
    display: flex;
    gap: core.$spacing-xs;
    margin-top: core.$spacing-xs;

    fudis-button:first-of-type {
      margin-left: core.$spacing-xs;
    }

    @include core.breakpoint('sm') {
      margin-top: 0;
      margin-left: 0;
    }
  }
}