@import '../../variables.scss';

#{$biz-css-prefix}-select {
  position: relative;
  width: 100%;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 2px;
  padding-right: 10px;
  border-bottom: 1px solid var(--color-gray-30);
  font-size: 16px;
  display: flex;

  .inner-select {
    color: var(--color-gray-40);
    border: none;
    font-size: 14px;
    vertical-align: 0px;
    flex-grow: 1;
    padding-right: 8px;
    outline: none;
    background: transparent;
    appearance: none;

    &:disabled {
      color:  var(--color-gray-50);
      background: transparent;
    }

    &.inner-active{
      color: var(--color-gray-90);
    }

    option {
      padding: 3px 0;
    }
  }

  .select-angle-right {
    position: absolute;
    right: 10px;
    top: 5px;
  }

  .icon-angle-right {
    color: var(--color-gray-40);
    font-size: 13px;

    &.inner-active {
      color: var(--color-gray-90);
    }
  }

  .placeholder-txt {
    display: none;
  }

  .inner-label {
    margin-right: 20px;
    min-width: 60px;
    text-align: right;
  }

  .required-title {
    color: var(--color-error-50);
    margin: 3px 1px;
  }

  .icon-times-circle {
    font-size: 18px;
    position: absolute;
    right: 10px;
    top: 13px;
    color: var(--color-gray-40);
  }

  &.au-select-separate {
    display: block;
    .inner-label {
      text-align: left;
      display: block;
      margin-bottom: 8px;
    }
    .inner-select {
      width: 100%;
      display: block;
      margin-bottom: 2px;
    }
    .select-angle-right {
      top: 40px;
    }
  }

  &.au-select-left {
    .inner-select {
      text-align: left;
    }
  }

  &.au-select-center {
    .inner-select {
      text-align: center;
    }
  }

  &.au-select-right {
    .inner-select {
      text-align: right;
    }
  }

  &-error {
    .inner-select {
      color: var(--color-error-50);
    }
    .icon-exclamation-circle {
      font-size: 18px;
      position: absolute;
      right: 10px;
      top: 13px;
      color: var(--color-error-50);
    }
  }
}