/*
Component represents a navbar (V2).
Use:
  <div class="top-navbar v2">
    <span class="top-logo"></span>

    <div class="top-navbar-items">
      <div class="top-navbar-item">
        <p>Онлайн</p>
      </div>
      <div class="top-navbar-item">
        <p>Очное обучение</p>
      </div>
      <div class="top-navbar-item">
        <p>События</p>
      </div>
      <div class="top-navbar-item">
        <p>Ангийский язык</p>
      </div>
    </div>

    <div class="top-navbar-location">
      <p>москва</p>
    </div>
  </div>
*/

.top-navbar.v2 {
  width: 100%;
  height: var(--unit-7);

  padding: 0 var(--unit-8);

  display: flex;
  flex-direction: row;

  .top-logo {
    align-self: center;
  }
  
  .top-navbar-items {
    height: 100%;

    margin: 0 auto;

    display: flex;
    flex-direction: row;
    align-items: center;

    .top-navbar-item {
      height: 100%;

      display: flex;
      align-items: center;
      justify-content: center;

      margin-right: var(--unit-4);

      padding: 0 var(--unit-3);

      color: var(--color-secondary-text);
      font-size: var(--font-size-3);

      background: var(--color-secondary);

      border-radius: 32px;

      &:last-child {
        margin-right: 0;
      }
    }
  }

  .top-navbar-location {
    height: 100%;

    padding-left: var(--unit-4);
    padding-right: var(--unit-7);

    margin: 0 auto;

    position: relative;

    display: flex;
    align-items: center;

    background: var(--color-primary);

    color: var(--color-primary-text);
    font-size: var(--font-size-3);

    border-radius: 32px;

    &::after {
      content: '';

      width: var(--unit-4);
      height: var(--unit-4);

      position: absolute;
      top: var(--unit-2);
      right: var(--unit-3);
      bottom: var(--unit-2);

      background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 17 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.58594 6.92578L4.88281 7.64453L8.35937 10.9844L11.832 7.64453L11.1367 6.92578L8.35937 9.58594L5.58594 6.92578Z' fill='black' fill-opacity='0.72'/%3E%3C/svg%3E");
    }
  }

  .top-navbar-menu {
    padding-right: var(--unit-7);

    position: relative;

    display: flex;
    align-items: center;

    color: var(--color-primary);
    font-size: var(--font-size-2);

    &::after {
      content: '';

      width: 24px;
      height: 16px;

      position: absolute;
      top: var(--unit-2);
      right: 0;
      bottom: var(--unit-2);

      background-image: url("data:image/svg+xml,%3Csvg width='24' height='16' viewBox='0 0 24 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 1H24' stroke='%2326DE70' stroke-width='2'/%3E%3Cpath d='M0 9H24' stroke='%2326DE70' stroke-width='2'/%3E%3Cpath d='M0 17H24' stroke='%2326DE70' stroke-width='2'/%3E%3C/svg%3E");
    }
  }
}