@import '../../../styles/global.colors.scss';
@import '../../../styles/mixins';

.burger {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;

  .line {
    background-color: $dark-gray-text-color;
    transition: all;
    transition-duration: 300ms;
    transition: ease-out;
    height: 2px;
    width: 12px;
    border-radius: 10px;
  }
  .line:nth-child(2) {
    background-color: $dark-gray-text-color;
    transition: all;
    transition-duration: 300ms;
    transition: ease-out;
    height: 2px;
    width: 16px;
    border-radius: 10px;
  }

  &:hover {
    color: $primary-blue-color;
  }
}

@include mobile() {
  .burger {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;

    .line {
      background-color: $dark-gray-text-color;
      transition: all;
      transition-duration: 300ms;
      transition: ease-out;
      height: 2px;
      width: 12px;
    }
    .line:nth-child(2) {
      background-color: $dark-gray-text-color;
      transition: all;
      transition-duration: 300ms;
      transition: ease-out;
      height: 2px;
      width: 16px;
    }

    &:hover {
      color: $primary-blue-color;
    }
  }
}