.file-container {
  background-color: $white;
  border: 1px solid $color-border;
  border-radius: 3px;

  .file-content {
    position: relative;
    overflow: auto;

    /* stylelint-disable-next-line */
    .ace_editor {
      font-family: Menlo, Consolas, Monaco, 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace;
    }

    pre {
      margin-bottom: 0;
    }

    .loading-mask {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 6;
      padding-top: 30px;
      text-align: center;
      background: $color-dark-2;
    }

    .error-marker {
      position: absolute;
      left: 0 !important;
      width: 100% !important;
      background: $color-danger-bg;
    }
  }

  &.m-20 {
    margin: 20px 0;
  }

  .file-title {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    margin: 0;
    padding: 0 16px;
    background-color: $whitesmoke;
    border-bottom: 1px solid $color-border;
    border-radius: 3px 3px 0 0;

    .file-ops {
      display: flex;
      align-items: center;
    }

    i {
      margin-right: $p12;
      color: $color-dark-4;
      font-weight: normal;
      font-size: 20px;

      &:hover {
        color: $color-active;
        cursor: pointer;
      }
    }

    i:last-child {
      margin-right: 0;
    }

    .btn-group {
      button {
        padding: 6px 10px;
        border-color: $platinum;
        outline: none;

        &:hover {
          background-color: $platinum;
        }

        &:first-child {
          border-right: none;
          border-top-left-radius: 4px;
          border-bottom-left-radius: 4px;
        }

        &:last-child {
          border-top-right-radius: 4px;
          border-bottom-right-radius: 4px;
        }

        &.danger {
          color: $white;
          background-color: $red;
          border-color: $red;

          &:hover {
            background-color: darken($red, 10%);
          }
        }
      }

      &.disabled {
        button {
          color: $darkgray;
          background-color: $whitesmoke;
          border-color: $gainsboro;
          cursor: not-allowed;

          &:hover {
            background-color: $whitesmoke;
          }
        }
      }
    }
  }
}
