@import "variables";
@import "functions";
@import "mixins";

.knk-success {
  font-size: 1em;
  color: $knk-color-success;

  .material-icons {
    font-size: inherit;
    vertical-align: middle;
  }
}

.knk-error {
  font-size: 1em;
  color: $knk-color-wrong;

  .material-icons {
    font-size: inherit;
    vertical-align: middle;
  }
}

.knk-required {
  font-size: 1em;
  color: $knk-color-required;
  vertical-align: super;

  .material-icons {
    font-size: inherit;
    vertical-align: inherit;
  }
}

.knk-form-field {
  @include knk-font-default;
  font-size: 14px;

  .knk-label {
    margin-bottom: 5px;
  }

  .knk-error {
    margin-top: 5px;
  }
}

.knk-label {
  font-size: 1em;
  @include theming {
    color: theme-get('color-font');
  }
}

.knk-toggle-label {
  @include knk-toggle-label;
}

.knk-input {
  @include knk-input;
  @include knk-input-placeholder;
}

.knk-textarea {
  max-width: 500px;
  min-width: auto;
  width: 100%;
  outline: 0;
  border: 0;
  border-bottom: 1px solid #000000;
  background: transparent none;
  @include knk-font-default;
  @include theming($if: default) {
    color: rgba(0, 0, 0, 0.5);
    @include knk-input-placeholder(rgba(0, 0, 0, 0.5));
  }
  @include theming($if: night) {
    color: #ffffff;
    @include knk-input-placeholder(#ffffff);
  }

  &.mat-autosize {
    overflow: hidden;
    resize: none;
  }
}

.knk-ng-select {
  @include knk-ng-select;

  &#{&}--compact {
    &.ng-select.ng-select-single {
      max-width: none;
      width: 230px;

      .ng-select-container {
        height: 40px;
      }

      .ng-select-container .ng-value-container,
      .ng-select-container .ng-value-container .ng-placeholder,
      .ng-select-container .ng-value-container .ng-value {
        font-size: 12px;
        line-height: 2.2;
      }
    }
  }
}

.knk-quill-editor {
  @include knk-quill-editor;

  .ql-editor.ql-blank {
    &:before {
      @include theming($if: default) {
        color: theme-get(color-font);
      }
      @include theming($if: night) {
        color: theme-get(color-font);
      }
    }
  }

  .ql-toolbar .ql-picker-item.ql-selected,
  .ql-toolbar .ql-picker-item:hover,
  .ql-toolbar .ql-picker-label.ql-active,
  .ql-toolbar .ql-picker-label:hover,
  .ql-toolbar button.ql-active,
  .ql-toolbar button:focus,
  .ql-toolbar button:hover {
    color: $knk-color-primary
  }

  .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
  .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
  .ql-toolbar .ql-picker-item:hover .ql-stroke,
  .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
  .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
  .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
  .ql-toolbar .ql-picker-label:hover .ql-stroke,
  .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
  .ql-toolbar button.ql-active .ql-stroke,
  .ql-toolbar button.ql-active .ql-stroke-miter,
  .ql-toolbar button:focus .ql-stroke,
  .ql-toolbar button:focus .ql-stroke-miter,
  .ql-toolbar button:hover .ql-stroke,
  .ql-toolbar button:hover .ql-stroke-miter {
    stroke: $knk-color-primary;
  }

  .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
  .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
  .ql-toolbar .ql-picker-item:hover .ql-fill,
  .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
  .ql-toolbar .ql-picker-label.ql-active .ql-fill,
  .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
  .ql-toolbar .ql-picker-label:hover .ql-fill,
  .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
  .ql-toolbar button.ql-active .ql-fill,
  .ql-toolbar button.ql-active .ql-stroke.ql-fill,
  .ql-toolbar button:focus .ql-fill,
  .ql-toolbar button:focus .ql-stroke.ql-fill,
  .ql-toolbar button:hover .ql-fill,
  .ql-toolbar button:hover .ql-stroke.ql-fill {
    fill: $knk-color-primary;
  }
}

.knk-nouislider {
  @include knk-nouislider;

  .noUi-handle {
    cursor: pointer;
  }

  .noUi-target.noUi-rate {
    .noUi-connects,
    .noUi-connects .noUi-connect {
      opacity: 0;
    }

    .noUi-tooltip {
      font: 0 none;
    }

    .noUi-handle,
    .noUi-tooltip {
      transition: background-color 50ms ease-in-out;
      will-change: background-color;
    }

    .noUi-tooltip:before {
      transition: border-top-color 50ms ease-in-out;
      will-change: border-top-color;
    }

    .noUi-tooltip:after {
      transition: border-bottom-color 50ms ease-in-out;
      will-change: border-bottom-color;
    }

    .noUi-rate-connect {
      z-index: 3;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: auto;
      cursor: pointer;

      .noUi-rate-connect-splash {
        z-index: 4;
        position: absolute;
        left: auto;
        right: 0;
        width: 100%;
        height: 4px;
        background: #e4e8ea;
        transition: width 50ms ease-in-out;
        will-change: width;
      }

      .noUi-rate-connect-backdrop {
        z-index: 3;
        position: absolute;
        left: 0;
        right: auto;
        width: 100%;
        height: 4px;
        background: linear-gradient(to right, #ff5c4b 0%, #fb8a3d 25%, #efb338 50%, #8bc870 75%, #28dda7 100%);
      }
    }

    .noUi-rate-rails {
      z-index: 4;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: auto;
      cursor: pointer;

      .noUi-rate-rail {
        position: absolute;
        left: 0;
        right: auto;
        width: 3.5px;
        height: 3.5px;
        margin-top: 0.5px;
        margin-left: 1.5px;
        background-color: #ffffff;
      }
    }
  }

  .noUi-target.noUi-rate.noUi-rate--point-1 {
    .noUi-handle,
    .noUi-tooltip {
      background-color: #ff5c4b;
    }

    .noUi-tooltip:before {
      border-top-color: #ff5c4b;
    }

    .noUi-tooltip:after {
      border-bottom-color: #ff5c4b;
    }
  }

  .noUi-target.noUi-rate.noUi-rate--point-2 {
    .noUi-handle,
    .noUi-tooltip {
      background-color: #fb8a3d;
    }

    .noUi-tooltip:before {
      border-top-color: #fb8a3d;
    }

    .noUi-tooltip:after {
      border-bottom-color: #fb8a3d;
    }
  }

  .noUi-target.noUi-rate.noUi-rate--point-3 {
    .noUi-handle,
    .noUi-tooltip {
      background-color: #efb338;
    }

    .noUi-tooltip:before {
      border-top-color: #efb338;
    }

    .noUi-tooltip:after {
      border-bottom-color: #efb338;
    }
  }

  .noUi-target.noUi-rate.noUi-rate--point-4 {
    .noUi-handle,
    .noUi-tooltip {
      background-color: #8bc870;
    }

    .noUi-tooltip:before {
      border-top-color: #8bc870;
    }

    .noUi-tooltip:after {
      border-bottom-color: #8bc870;
    }
  }

  .noUi-target.noUi-rate.noUi-rate--point-5 {
    .noUi-handle,
    .noUi-tooltip {
      background-color: #28dda7;
    }

    .noUi-tooltip:before {
      border-top-color: #28dda7;
    }

    .noUi-tooltip:after {
      border-bottom-color: #28dda7;
    }
  }

  &#{&}--rating {
    max-width: 430px;
  }

  &#{&}--visible {
    .noUi-tooltip {
      opacity: 1 !important;
    }
  }
}

.knk-button {
  @include knk-button;
  outline: 0;

  .knk-button__icon {
    outline: 0;
    @include theming {
      color: $knk-color-primary;
    }
  }

  &:disabled .knk-button__icon {
    @include theming {
      color: rgba($color: #000000, $alpha: 0.37);
    }
  }

  &:focus {
    outline: 0;
  }

  &#{&}--continue {
    width: 280px;
    border-radius: 50px;
    font-weight: bold;
    letter-spacing: 1px;
  }

  &#{&}--preview,
  &#{&}--cancel,
  &#{&}--publish,
  &#{&}--back {
    width: 194px;
    height: 30px;
    font-size: 15px;
    line-height: 2.1;
  }

  &#{&}--upload {
    height: 38px;
    font-size: 14px;
    @include theming {
      background-color: theme-get('color-surface');
    }
  }

  &#{&}--upload &__icon {
    font-size: 24px;
  }
}