cloudfoundry/stratos

:host {
  display: flex;
  width: 100%;
}
.editor {

  $toolbar-height: 40px;

  &-card {
    flex: 1;
    padding: 0;
  }

  &-title {
    font-size: 14px;
  }

  &-form {
    display: block;
    height: calc(100% - #{$toolbar-height});
    overflow-y: scroll;
    padding: 20px;    
    width: 100%;

    &.editor-hidden {
      display: none;
    }
  }

  &-loading {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center; 
    position: absolute;
    width: 100%;
    z-index: 100;
    
    &__msg {
      text-align: center;
    }
    &__progress-bar {
      margin-top: 10px;
      min-width: 120px;
    }
  }

  &-yaml-error {
    align-items: center;
    display: flex;
    height: calc(100% - #{$toolbar-height});
    justify-content: center;
    margin: -20px;
    opacity: 0.7;
    position: absolute;
    width: 100%;
    z-index: 100;

    &__msg {
      display: flex;
      flex-direction: row;
    }
    &__text {
      line-height: 24px;
    }
    &__icon {
      font-size: 32px;
      height: 32px;
      margin-right: 12px;
      width: 32px;
     }
  }

  &-toolbar-buttons {
    display: flex;
    mat-button-toggle {
      margin-left: 8px;
    }
  }

  &-spacer {
    flex: 1 1 auto;
  }

  &-monaco {
    display: block;

    &.editor-hidden {
      display: none;
    }
  }

  &-monaco-edit {
    position: absolute;
  }

  &-menu-divider {
    margin: 4px 0;
  }  
}

.mat-card.editor-card>:first-child {
  margin: 0;
}