@use '../theme/expander.tokens' as expander;
@use '../theme/palette.tokens' as palette;
@use '../theme/spacing.tokens' as spacing;
@use '../theme/transitions.tokens' as transitions;

.pa-expander {
  .pa-expander-button .pa-button {
    padding: spacing.rhythm(0.5);
    transform: rotate(0);
    transition: transform transitions.$transition-hint;

    pa-icon svg {
      fill: palette.$color-dark-stronger;
    }
  }

  .pa-expander-header {
    align-items: center;
    display: flex;
    gap: spacing.rhythm(0.5);
    position: relative;
    width: 100%;

    .pa-expander-title {
      color: expander.$color-expanded-expander-header-title;
      flex: 1 0 auto;
      transition: color transitions.$transition-hint;

      &:not(.pa-button-only) {
        cursor: pointer;
      }

      &:hover {
        color: expander.$color-expanded-expander-header-title-hover;
      }
    }

    .pa-expander-header-extra {
      flex: 0 0 auto;
    }
  }

  .pa-expander-body {
    opacity: 1;
    height: var(--contentHeight, 1px);
    transition:
      opacity transitions.$transition-hint,
      height transitions.$transition-hint;
  }

  &.pa-collapsed {
    .pa-expander-button .pa-button {
      transform: rotate(-90deg);
    }

    .pa-expander-body {
      height: 0;
      opacity: 0;
    }
  }

  &:not(.pa-expander-card) {
    .pa-expander-button .pa-button {
      pa-icon svg {
        fill: expander.$color-expanded-expander-header-icon;
        transition: fill transitions.$transition-hint;
      }
    }

    & > .pa-expander-header {
      background: expander.$background-color-expanded-expander-header;
      box-shadow: expander.$box-shadow-expanded-expander-header;
      transition:
        background transitions.$transition-hint,
        box-shadow transitions.$transition-hint;

      &:hover {
        background: expander.$background-color-expanded-expander-header-hover;
      }

      .pa-expander-title {
        line-height: spacing.rhythm(5);
      }
    }

    &.pa-collapsed {
      .pa-expander-button .pa-button pa-icon svg {
        fill: expander.$color-collapsed-expander-header-icon;
      }

      .pa-expander-header {
        background: expander.$background-color-collapsed-expander-header;
        box-shadow: expander.$box-shadow-collapsed-expander-header;

        &:hover {
          background: expander.$background-color-collapsed-expander-header-hover;
        }

        .pa-expander-title {
          color: expander.$color-collapsed-expander-header-title;
          &:hover {
            color: expander.$color-collapsed-expander-header-title-hover;
          }
        }
      }
    }
  }

  &.pa-expander-card {
    .pa-expander-header {
      flex-direction: row-reverse;

      .pa-expander-title {
        color: palette.$color-dark-stronger;
      }

      .pa-expander-header-extra {
        margin-right: spacing.rhythm(3);
      }
    }

    &.pa-collapsed .pa-expander-button .pa-button {
      transform: rotate(-180deg);
    }
  }
}