@use '../../token/breakpoint/breakpoint';

$tikui-header-navigation-spacing: 80px !default;
$tikui-header-navigation-large-breakpoint: breakpoint.$tikui-breakpoint-large !default;

.tikui-header-navigation {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;

  &--slot {
    margin: 0 $tikui-header-navigation-spacing 0 0;
    padding: 0;

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

@media screen and (max-width: $tikui-header-navigation-large-breakpoint) {
  .tikui-header-navigation {
    flex-direction: column;
    align-items: center;

    &--slot {
      margin: 0;
    }
  }
}