@use '../abstract/_all';
@use '../abstract/setup';

.form-input-label,
.form-input-label-2 {
  .validation-error-messages {
    color: setup.$c-error;

    svg {
      path {
        fill: setup.$c-error;
      }
    }
  }

  &.datalist {
    input {
      &:focus + svg {
        transform: rotate(-180deg);
        transition: 0.6s;
      }

      &.validation-error + svg path {
        fill: red;
      }
    }

    & input::-webkit-list-button,
    & input::-webkit-calendar-picker-indicator {
      display: none;
      opacity: 0;
    }

    svg {
      position: absolute;
      top: 16px;
      right: 16px;
      transform: rotate(0deg);
      transition: 0.6s;
    }

    .validation-error-messages {
      color: setup.$c-error;

      svg {
        position: relative;
        top: auto;
        right: auto;

        path {
          fill: setup.$c-error;
        }
      }
    }
  }
}