@import '../abstract/_all';
.form-input-label,
.form-input-label-2 {
  .validation-error-messages {
    color: $c-error;
    svg {
      path {
        fill: $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;
    }
    &::after {
      border: 1px solid $c-primary;
      border-radius: $form-radius;
      border-right: 0;
      border-top: 0;
      content: ' ';
      height: 8px;
      margin-top: -8px;
      pointer-events: none;
      position: absolute;
      top: 26px;
      right: 4px;
      transform: rotate(-45deg);
      transform-origin: center;
      width: 8px;
    }
    .validation-error-messages {
      color: $c-error;
      svg {
        position: relative;
        top: auto;
        right: auto;
        path {
          fill: $c-error;
        }
      }
    }
    .is-rtl & {
      &::after {
        top: 26px;
        right: initial;
        left: 4px;
      }
    }
  }
}