@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 0 vars.$space-l;
  }

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

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

.search-history-item {
  display: flex;
  align-items: flex-start;
  gap: vars.$space-m;
  padding: vars.$space-m vars.$space-xl;
  cursor: pointer;
  border-top: 1px solid colors.$border;
  transition: background-color 0.2s ease;

  // TZ §4.1.9.5: hover → голубая подложка, текст и иконка становятся белыми.
  &:hover {
    background-color: colors.$blue;
    color: colors.$white;
  }

  &:hover .search-history-item__icon,
  &:hover .search-history-item__title,
  &:hover .search-history-item__city,
  &:hover .search-history-item__date {
    color: colors.$white;
  }

  &__icon {
    flex-shrink: 0;
    width: 24px;
    color: colors.$light-gray;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 2px;
  }

  &__data {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  &__title {
    font-size: fonts.$font-size-s;
    color: colors.$light-gray;
  }

  &__city {
    font-size: fonts.$font-size-m;
    font-weight: fonts.$font-medium;
    color: colors.$text-color;
    line-height: 1.2;
  }

  &__date {
    font-size: fonts.$font-size-s;
    color: colors.$light-gray;
  }
}
