.main-window-top-bar {
  padding: $spacing;

  .main-window-btn-settings {
    border-radius: 10em;

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

  .main-window-btn-help {
    border-radius: 10em;

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

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

  .btn-host-meeting,
  .btn-join-meeting {
    text-shadow: none;

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

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

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

.main-window-status-bar {
  color: $gray-200;
  padding: $spacing/2 $spacing;
  border-width: 0;
  background-color: $gray-900;
  background-image: linear-gradient(-180deg, darken($gray-800, 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;
    }
  }
}
