@import 'base';

a {
  cursor: pointer;
}

a,
a:hover,
a:active,
a:focus {
  color: $color-text-tertiary;
}

button {
  border: none;
}

button,
.button,
.hijacked-warning .btn {
  @include _padding(10px, 15px, 10px, 15px);
  border-radius: 0.8rem;
}

.button,
.button:hover,
.button:active,
.button:focus {
  color: $color-text-secondary;
  text-decoration: none;
}

.button--jumbo {
  @include _font-size(38px);
  @include _line-height(38px);
  font-family: 'Baloo', serif;
  font-weight: 500;
}

.button--big {
  @include _font-size(28px);
  @include _line-height(28px);
  @include _padding(15px, 20px, 15px, 20px);
  display: inline-block;
  font-family: 'Baloo', serif;
  font-weight: 500;
}

.button--regular,
.ui-dialog-buttonset button,
.hijacked-warning .btn {
  @include _font-size(20px);
  @include _line-height(25px);
  @include _padding(10px, 15px, 10px, 15px);
}

.button--small {
  @include _font-size(16px);
  @include _line-height(25px);
  @include _padding(2px, 10px, 2px, 10px);
}

.button--bottom {
  margin-top: auto;
}

.button--confirm {
  background-color: $color-teacher-blue;
  border: 1px solid;
  border-color: $color-teacher-blue;
  color: $color-button-secondary-border-light;
}

.button--cancel {
  background-color: $color-background-secondary;
  border: 1px solid;
  color: $color-text-primary;
}

.button--cancel:hover,
.button--cancel:active,
.button--cancel:focus {
  color: $color-text-primary;
}

.button--menu {
  @include _padding(10px, 0px, 21px, 0px);
  background-color: transparent;
  border-bottom: 6px solid $color-background-secondary;
  border-radius: 0;
}

.button--menu--enabled:hover {
  font-weight: 600;
}

.button--menu--disabled {
  color: $color-button-disabled;

  &:hover {
    cursor: default;
  }
}

.button--menu--primary {
  @include _font-size(30px);
  @include _line-height(25px);
  @include _margin(0px, 40px, 0px, 10px);

  &:hover {
    color: $color-text-tertiary;
    text-decoration: underline;
  }
}

.button--menu--secondary {
  @include _font-size(22px);
  @include _line-height(20px);
  @include _margin(0px, 20px, 0px, 20px);
}

.button--menu--teacher--active {
  border-bottom: 6px solid $color-button-border-teacher;

  &:hover {
    font-weight: 600;
  }
}

.button--menu--student--active {
  border-bottom: 6px solid $color-button-border-student;

  &:hover {
    font-weight: 600;
  }
}

.button--primary--general-play {
  background: $color-button-primary-action-general-play;
  color: $color-text-secondary;

  &:hover {
    background: $color-button-primary-action-general-play-hover;
  }
}

.button--primary--general-educate {
  background: $color-button-primary-action-general-educate;
  color: $color-text-secondary;

  &:hover {
    background: $color-button-primary-action-general-educate-hover;
  }
}

.button--primary--positive {
  background: $color-button-primary-action-positive;
  color: $color-text-secondary;

  &:hover {
    background: $color-button-primary-action-positive-hover;
  }
}

#classes-table {
  .button {
    display: inline-block;
  }
}

.button--primary--negative {
  background: $color-button-primary-action-negative;
  color: $color-text-secondary;

  &:hover {
    background: $color-button-primary-action-negative-hover;
  }
}

.button--primary--danger,
.ui-dialog-buttonset button,
.hijacked-warning .btn {
  background: $color-button-primary-action-danger;
  color: $color-text-secondary;

  &:hover {
    background: $color-button-primary-action-danger-hover;
  }
}

.django-hijack-button-bootstrap {
  @include _margin(0px, 0px, 0px, 50px);
}

.button--primary--navigation {
  background: $color-button-primary-action-navigation;
  color: $color-text-secondary;

  &:hover {
    background: $color-button-primary-action-navigation-hover;
  }
}

.button--primary--setup {
  background: $color-button-primary-action-setup;
  color: $color-text-secondary;

  &:hover {
    background: $color-button-primary-action-setup-hover;
  }
}

.button--primary--disabled {
  background: $color-button-disabled;

  &:hover {
    background: $color-button-disabled;
  }
}

.button--secondary {
  background-color: transparent;
  border: 1px solid;
}

.button--secondary--light {
  border-color: $color-button-secondary-border-light;
  color: $color-text-secondary;
}

.button--secondary--dark {
  border-color: $color-button-secondary-border-dark;
  color: $color-text-tertiary;

  .glyphicon {
    @include _font-size(20px);
  }

  &:hover,
  &:active,
  &:focus {
    background-color: $color-background-tertiary;
    color: $color-text-secondary;
  }
}

.button--dropdown {
  @include _border-radius(8px, 8px, 8px, 8px);
  @extend .dropdown;
  background: $color-background-secondary;
  border: 1px solid $color-text-tertiary;
  color: $color-text-tertiary;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  outline: none;

  .glyphicon {
    @include _font-size(20px);
    @include _padding(0px, 0px, 0px, 10px);
    display: inline-flex;
  }

  &:after {
    @include _font-size(12px);
    @include _padding(0px, 0px, 0px, $spacing * 5);
    content: '\e252';
    font-family: 'Glyphicons Halflings';
  }
}

.button--dropdown[aria-expanded='true'] {
  @include _border-radius(8px, 8px, 0px, 0px);

  &:after {
    content: '\e253';
  }
}

.button--secondary--no-border {
  border-color: transparent;
  color: $color-text-tertiary;
}

.button--secondary--background-light {
  background-color: $color-background-secondary;
  border-color: transparent;
  color: $color-text-primary;
}

.button-group {
  > :not(:first-child) {
    @include _margin(0px, 0px, 0px, 20px);
  }
}

.resource-buttons {
  @include _padding(40px, 0px, 0px, 0px);

  a {
    @include _margin(0px, 20px, 20px, 0px);
    display: inline-flex;
  }
}

.button--banner--container {
  display: flex;
  flex-wrap: wrap;
}

.button--banner {
  & + & {
    margin: 0 0 0 30px;
  }
}

.button--login {
  margin-top: $spacing * 3;
}

@media (min-width: $tablet-small-min-width) {
  .menu__item {
    display: none;
  }
}

@media (min-width: $tablet-small-min-width) and (max-width: $tablet-large-max-width) {
  .button--menu--primary {
    @include _margin(0px, $spacing * 6, 0px, 0px);
  }

  .button--menu--secondary {
    @include _margin(0px, 10px, 0px, 10px);
  }

  .button--menu--enabled {
    @include _font-size(18px);
  }
}

@media (max-width: $mobile-max-width) {
  .button--secondary--dark {
    background-color: $color-background-secondary;
  }

  .button--menu__item {
    @include _font-size(30px);
    align-items: center;
    background-color: $color-background-tertiary;
    border-radius: 0;
    border-top: 1px solid $color-text-secondary;
    color: $color-text-secondary;
    display: flex;
    font-weight: 600;
    height: 60px;
    justify-content: space-between;
    text-align: left;
    width: 100%;
  }

  .menu__item {
    @include _font-size(30px);
    align-items: center;
    background-color: $color-button-menu-item;
    display: flex;
    height: 60px;
    justify-content: center;
    text-align: center;
    width: 100%;

    .button--secondary--dark {
      @include _margin(0px, 0px, 0px, 30px);

      .glyphicon {
        @include _font-size(32px);
      }
    }
  }

  .button--banner__item {
    @include _font-size(30px);
    font-weight: 500;
    width: 50%;

    &:focus,
    &:hover,
    &:active {
      background-color: $color-background-secondary;
      color: $color-teacher-blue;
    }
  }

  .button--menu__item--sub-header {
    &:after {
      content: '\e252';
      font-family: 'Glyphicons Halflings';
    }
  }

  .button--menu__item--sub-header[aria-expanded='true'] {
    &:after {
      content: '\e253';
    }
  }

  .button--menu__item--navigation {
    background-color: $color-background-tint-quinary;
    color: $color-text-tertiary;
  }

  .button--menu__item--teacher {
    background-color: $color-background-teach;
  }

  .button--menu__item--student {
    background-color: $color-background-play;
  }

  .button--menu__item--independent {
    background-color: $color-background-play-indep;
  }

  .button--menu__item__sub {
    padding-left: $spacing * 6;
  }
}
