/*
Component represents a heading and subheadings.
Use:
  <div class="top-accordion">
    <p class="top-accordion-title">
      Плоскостная графика и макетирование
    <p>
    </div>
    <div class="top-accordion-content">
      <p>
        Создавать и разрабатывать с нуля бренды компаний: заниматься подготовкой гайдлайнов и брендбуков, разрабатывать фирменную стилистику, корпоративные элементы дизайна, фирменный стиль, знаки, логотипы и персонажи бренда
      </p>
    </div>

    <button class="top-accordion-button"></button>
  </div>
*/
@use '../mixins/flex.scss';

.top-accordion {
  padding: var(--unit-4);

  position: relative;

  border-width: 1px;
  border-style: solid;
  border-color: var(--color-primary);

  @include flex.column;

  &.open {
    border-color: var(--color-white-text);

    .top-accordion-title {
      color: var(--color-white-text);
    }
    .top-accordion-content {
      @include flex.column;

      > p {
        color: var(--color-white-text);
      }
    }
    .top-accordion-button {
      background: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 0V16' stroke='%230D0621' stroke-width='2'/%3E%3Cpath d='M0 8L16 8' stroke='%230D0621' stroke-width='2'/%3E%3C/svg%3E")
        white;
    }
  }

  .top-accordion-title {
    width: 100%;
    font-size: var(--font-size-5);
    color: var(--color-primary);
  }
  .top-accordion-content {
    margin-top: var(--unit-4);
    display: none;

    > p {
      font-size: var(--font-size-3);
    }
  }
  .top-accordion-button {
    position: absolute;
    bottom: var(--unit-3);
    right: var(--unit-3);

    width: 24px;
    height: 24px;

    cursor: pointer;

    background: 
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 0V16' stroke='%230D0621' stroke-width='2'/%3E%3Cpath d='M0 8L16 8' stroke='%230D0621' stroke-width='2'/%3E%3C/svg%3E")
      var(--color-primary);
    background-repeat: no-repeat !important;
    background-position: center !important;

    border-radius: var(--radius-5);
  }
}