sparkletown/sparkle

@import "scss/constants";

.WorldNav {
  display: flex;
  width: 100%;
  flex-direction: row;

  &__tab {
    position: relative;
    flex-grow: 1;
    text-align: center;
    cursor: pointer;
    color: opaque-white(0.6);
    text-decoration: none;
    padding: $spacing--sm $spacing--xl;
    height: $admin-ng-tab-bar-height;

    &:hover {
      color: $content--over;
    }

    &--selected {
      color: $content--over;
      background-color: $accent--under;
    }

    @media (max-width: $media-breakpoint--lg) {
      width: 50%;
    }

    @media (max-width: $media-breakpoint--md) {
      width: 100%;
    }
  }

  &__icon {
    margin-right: $spacing--sm;
  }
}