@import 'scss/styles.scss';

.image-cropper-container {
  width: 456px;

  &.cropper-show-dropzone {
    width: auto !important;
  }

  &.disable-cropper {
    pointer-events: none !important;

    .ngx-ic-cropper {
      visibility: hidden !important;
    }
  }

  .ngx-cropper-container {
    width: 456px;
    height: 194px;

    &.cropper-show-dropzone {
      width: auto !important;
    }

    .ngx-ic-square {
      display: none !important;
    }

    .ngx-ic-cropper {
      pointer-events: none;

      &::after {
        border: dashed 4px $ta-light-grey-6 !important;
        opacity: 1 !important;
      }
    }
  }

  .slider-container {
    gap: 12px;
    width: 100%;

    .ngx-slider-selection {
      background: $blue-8 !important;
    }

    .ngx-slider {
      display: inline-block;
      position: relative;
      height: 4px;
      width: 100%;
      margin: 20px 0 8px;
    }

    .ngx-slider-bar {
      height: 6px;
      background: $grey-12 !important;
    }

    .ngx-slider-selection {
      background: $blue-8 !important;
    }

    .ngx-slider-model-value {
      display: none;
    }

    .ngx-slider-pointer {
      position: relative;
      width: 30px;
      height: 22px;
      top: -8px !important;
      background-color: $white-2 !important;
      box-shadow: 0 0 4px $ta-border-grey !important;
      border-radius: 2px !important;

      .ngx-slider-active {
        background-color: $blue-8 !important;
        &::after {
          background-color: $white-2 !important;
        }
      }

      .ngx-slider-pointer .ngx-slider-active::after {
        background-color: $white-2 !important;
      }

      &::after {
        position: absolute;
        top: 50%;
        left: 50%;

        width: 14px;
        height: 10px;
        border-radius: 0;
        user-select: none;

        transform: translate(-50%, -50%);
        content: '';
        background-image: url('/assets/ca-components/svg/dropzone/ic_grid.svg');
        background-color: $white-2 !important;
      }
    }
  }

  .crop-controls-container {
    gap: 12px;

    .buttons-container {
      margin-top: 12px;
      gap: 6px;
      cursor: pointer;

      p {
        margin: 0;
        padding: 0;
        font-size: 11px;
      }

      .save-check {
        background-color: $blue-4;
        width: 84px;
        height: 22px;
        border-radius: 2px;
        text-align: center;
        padding: 3px 0px;
        transition: all 0.3s ease-in-out;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        p {
          color: $white-2;
        }

        &:hover {
          background-color: $ta-blue-9;
        }
      }

      .cancel-check {
        background-color: $grey-12;
        width: 84px;
        height: 22px;
        border-radius: 2px;
        text-align: center;
        padding: 3px 0px;
        transition: all 0.3s ease-in-out;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        p {
          color: $black-2;
        }

        &:hover {
          background-color: $ta-gray-02;
        }
      }
    }
  }

  .crop-message {
    font-size: 11px;
    color: $red-4;
    padding-left: 10px;
    position: relative;
    top: 2px;

    &::-moz-selection {
      background-color: $red-14;
      color: $red-4;
    }

    &::selection {
      background-color: $red-14;
      color: $red-4;
    }
  }
}