sparkletown/sparkle

@import "scss/constants.scss";

.AdminVenueView {
  &__tab-bar {
    display: flex;
    justify-content: space-around;
  }

  @media (max-width: $media-breakpoint--lg) {
    align-items: center;
  }

  @media (max-width: $media-breakpoint--md) {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .AdminTitleBar {
    grid-template: 1fr 1fr / $admin-ia-manage-space-template-columns;
  }

  &__options {
    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%;
    }
  }

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