@import 'Styles/colors.scss';

.button-no-style {
  border: 0;
  background: none;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.25s ease-in-out;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.action-button {
  border: 1px solid $border-color;
  border-radius: 3px;
  font-size: 15px;
}

.point-style {
  content: '';
  border: 3px solid white;
  height: 11px;
  position: absolute;
  width: 11px;
}

.default-cropper {
  .cropper-point {
    background-color: transparent;
    border: solid 4px $black;
    height: 12px;
    opacity: 1;
    width: 12px;
  }

  .cropper-dashed,
  .point-n,
  .point-e,
  .point-s,
  .point-w {
    display: none;
  }

  .point-ne,
  .point-nw {
    border-bottom-width: 0;
    top: 0;

    &::after {
      @extend .point-style;

      border-bottom-width: 0;
      top: -4px;
    }
  }

  .point-se,
  .point-ne {
    border-left-width: 0;
    right: 0;

    &::after {
      right: -4px;
      border-left-width: 0;
    }
  }

  .point-nw,
  .point-sw {
    border-right-width: 0;
    left: 0;

    &::after {
      left: -4px;
      border-right-width: 0;
    }
  }

  .point-se,
  .point-sw {
    bottom: 0;
    border-top-width: 0;

    &::after {
      @extend .point-style;

      bottom: -4px;
      border-top-width: 0;
    }
  }
}

.select-input-style {
  margin-bottom: 0;

  .ui-select__label-text,
  .ui-select__display,
  .ui-select-option {
    font-size: 15px;
  }

  &.has-floating-label .ui-select__label-text.is-floating,
  .ui-select__feedback {
    font-size: 12px;
  }

  &.has-floating-label .ui-select__label-text.is-inline {
    transform: translateY(1.625rem) scale(1);
  }

  &.is-multiple .ui-select__display {
    height: 2rem;
    padding: 0;
  }
}

.select-nowrap-style {
  /deep/ .ui-select__content {
    max-width: 100%;
  }

  /deep/ .ui-select__display-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}