@use "../../styles/variables" as vars;
@use "../../styles/colors" as colors;
@use "../../styles/fonts" as fonts;
@use "../../styles/shadows" as shadows;
@use "../../styles/screen" as screen;

.search-history {
  margin: vars.$space-xl 0;

  @include screen.smTablet {
    margin-bottom: 0;
  }

  @include screen.mobile {
    margin-top: vars.$space-m;
    margin-bottom: 0;
  }

  .p-accordion-header {
    a {
      background-color: transparent;
      border: none;
      color: colors.$blue;
      padding: 0 vars.$space-l 0 vars.$space-xl;
      height: vars.$button-height;
      display: flex;
      align-items: center;
      font-weight: fonts.$font-bold;
      cursor: pointer;
      text-decoration: none;

      .p-header {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }

    &.p-highlight a {
      background-color: colors.$white;
      color: colors.$text-color;
    }
  }

  .p-accordion-content {
    padding: vars.$space-s vars.$space-xl vars.$space-xl vars.$space-xl;
  }

  &__content {
    max-height: 600px;
    overflow-y: auto;
  }

  &__item {
    padding: vars.$space-m vars.$space-l;
    cursor: pointer;
    border-radius: vars.$border-radius;
    transition: background-color 0.15s;

    &:hover {
      background-color: colors.$blue-extra-light;
    }
  }

  &__label {
    font-size: fonts.$font-size-m;
    color: colors.$blue;
  }

  .arrow-icon {
    display: inline-flex;
    align-items: center;
    width: 12px;
    height: 8px;
    transition: transform 0.2s ease;
    color: currentColor;

    svg {
      width: 12px;
      height: 8px;
    }

    &--rotated {
      transform: rotate(180deg);
    }
  }
}
