@import 'mixin';

.fa-red { color: @red; }
.fa-blue { color: @blue; }
.fa-green { color: @green; }
.fa-yellow { color: @yellow; }
.fa-gray { color: @gray; }

body {
  background: @background;
}

.loading {
  > .icon {
    color: @base_foreground;
  }
}

.modal {
  background: @background;
  color: @base_foreground;
}

.dialog {
  > .body {
    color: @base_foreground;
    border-color: @dialog_border_color;
    background: fade(@mask, @dialog_alpha);
    > .content {
      input {
        border-color: @form_border_color;
      }
      a.addon {
        background: @btn_background;
        color: @form_foreground;
        border-color: @form_border_color;
      }
    }
  }
}

.btn-group {
  > .btn {
    background: @btn_background;
    color: @form_foreground;
    border-color: @form_border_color;
    &[disabled] {
      background: @btn_disable_background;
      color: @form_disable_foreground;
      border-color: @form_disable_border_color;
    }
  }
}

input[type=checkbox] {
  +label {
    background: @form_disable_background;
    &:before {
      background: @form_background;
      border-color: @form_border_color;
    }
  }
}

.top {
  color: @base_foreground;
}

.more {
  color: @base_foreground;
  border-color: @base_foreground;
  background: fade(@mask, @dialog_alpha);
  &:before {
    border-bottom-color: @base_foreground !important;
  }
}

.hall {
  > .controls {
    &.btn-group > .btn {
      background: @hall_btn_background;
    }
  }
  .room {
    background: fade(@mask, @room_alpha);
    color: @base_foreground;
  }
}


.team-flag() {
  color: @base_foreground;
  &.red { background: fade(@red, @team_alpha); }
  &.blue { background: fade(@blue, @team_alpha); }
  &.green { background: fade(@green, @team_alpha); }
  &.yellow { background: fade(@yellow, @team_alpha); }
  &.white { background: fade(@white, @team_alpha); }
  &.black { background: fade(@black, @team_alpha); }
}

.teams {
  > .team {
    > .head {
      .team-flag;
    }
    > .roles {
      > .role {
        .team-flag;
        > .title {
          &.leaved {
            color: @gray;
          }
          > i.self {
            color: @black;
          }
        }
        > .point {
          color: @base_foreground;
        }
      }
    }
  }
}

.unsupported {
  background: @background;
}

.result {
  background: @background;
  color: @base_foreground;
}