.main-window-top-bar {
  background: $gray-100;
  border-bottom: 2px solid $gray-200;
  padding: $spacing;

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

  .main-window-btn-settings,
  .main-window-btn-help {
    font-size: $font-size-small;
    border-radius: 10em;
    background: $white;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    margin-left: $spacing/2;

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

    &:hover {
      color: $gray-900;
      background: $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;
  padding: $spacing/2 $spacing;
  background: $gray-900;
  background-image: linear-gradient(
    -180deg,
    darken($gray-900, 3%) 0%,
    darken($black, 3%) 90%
  );

  &.error {
    background: $red-700;
  }

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

  .status-show-errors {
    background: $gray-300;
    color: $gray-600;
    font-weight: $font-weight-normal;
    font-size: $font-size-medium;
    padding: 5px 20px;
    border-radius: 10em;
    border: 2px solid rgba($white, 0.1);
    box-shadow: 0 2px 3px rgba($black, 0.1);  

    &:hover,
    &:active,
    &:focus {
      border: 2px solid rgba($gray-500, 0.3);
      box-shadow: 0 2px 3px rgba($black, 0.3); 
      background: $gray-400;
    }
  }
}

textview text {
  background-color: white;
  color: $gray-800;
}
