@import 'vars';

.safi-editor {

  input[type=text] {
    background-color: $plain-bg-col;
    border: 1px solid $plain-border-col;
    color: $col-light;
    // padding: 0;
    margin: 0;
    line-height: initial;
    min-height: initial;
    border: none;
    border-radius: unset;
    box-shadow: none;
    border-radius: 2px;
    padding: 4px 6px;

    &.safi-input-text {
      padding: 6px 10px;
      background-color: $plain-bg-col;
      border: 1px solid $plain-border-col;
    }

    &:disabled {
      color: grey;
      font-style: italic;
    }

    &::placeholder {
      color: $col-dark-sidebar !important;
      font-style: italic !important;
      font-size: 0.9em;
    }
  }


  @at-root .custom-file-input {
    position: relative;

    &::-webkit-file-upload-button {
      visibility: hidden;
    }

    &::before {
      content: 'Import SVG';
      display: block;
      background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
      background: linear-gradient(top, #f9f9f9, #e3e3e3);
      border: 1px solid #3858e9;
      color: #3858e9;
      border-radius: 3px;
      padding: 5px 8px;
      outline: none;
      white-space: nowrap;
      -webkit-user-select: none;
      cursor: pointer;
      // font-weight: 700;
      // font-size: 10pt;
    }

    &:hover::before {
      // border-color: black;
      background: #f0f0f1;
    }

    &:active::before {
      background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
    }
  }
}