.main-window-top-bar {
  background-color: $gray-100;
  border-bottom: 1px solid $gray-300;

  .main-window-title {
    color: $gray-900;
    font-size: $font-size-large;
    font-weight: $font-weight-bold;
  }

  .main-window-btn-settings,
  .main-window-btn-help {
    border-radius: 10em;
    background-color: $white;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);

    @extend .btn;
    @extend .btn-sm;

    &:hover {
      color: $gray-900;
      background-color: $gray-200;
    }
  }
}

.main-window-actions {
  padding: $spacing;

  .btn-host-meeting,
  .btn-join-meeting {
    text-shadow: none;
    font-size: $font-size-large * 1.02;

    @extend .btn;
    @extend .btn-lg;

    label {
      font-size: $font-size-large;
      font-weight: $font-weight-semibold;
    }
  }

  .btn-host-meeting {
    @extend .btn-primary;
  }

  .btn-join-meeting {
    @extend .btn-secondary;
  }
}

.main-window-status-bar {
  color: $gray-200;
  border-width: 0;
  background-color: $gray-900;
  background-image: linear-gradient(-180deg, darken($gray-900, 3%) 0%, darken($black, 3%) 90%);

  &.error {
    background-color: $red-900;
    background-image: linear-gradient(-180deg, darken($red, 3%) 0%, darken($red-900, 3%) 90%);
  }

  .status-label {
    font-size: $font-size-medium;
  }

  .status-show-errors {
    @extend .btn-invisible;

    color: $white;
    font-weight: $font-weight-normal;
    font-size: $font-size-medium;
    padding: 5px 20px;
    border-radius: 10em;
    border: 2px solid rgba($white, 0.1);

    &:hover {
      color: $white;
      background: $red-800;
      border-color: $red-800;
    }
  }
}
