@import "../../../assets/scss/variables";

.custom-radio-select {
  position: relative;
  min-width: 350px;
  width: 100%;

  .select-head {
    width: 100%;
    position: relative;
    background-color: white;
    color: $title-color;
    //font-weight: $bold;
    font-size: 2rem;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #EFEFEF;
    padding-left: 33px;
    cursor: pointer;
    .down-arrow {
      padding-right: 22px;
    }
    & ul {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      padding: 0 15px 0 0;
      margin: 0;

      li {
        color: $main-color;
        text-overflow: ellipsis;
        overflow: hidden;
      }

    }

    & .open {
      margin: 0 10px;
      cursor: pointer;
    }

    &.disabled {
      cursor: initial;
      background-color: transparent;
      .down-arrow {
       display: none;
      }


      & .open {
        display: none;
      }
    }


  }

  ul.options {
    width: 100%;
    padding: 0;
    position: absolute;
    max-height: 600px;
    overflow-y: auto;
    z-index: 200000000;
    top: 0;
    left: 0;
    background-color: white;
    box-shadow: 0px 3px 6px #00000029;
    font-size: 1.8rem;
    letter-spacing: 0.4px;
    display: flex;
    flex-direction: column;

    & li {
      height: 45px;
      padding-left: 34px;
      color: $title-color;
      //font-weight: $bold;
      display: flex;
      align-items: center;
      font-size: 2rem;
      letter-spacing: 0.4px;
      order: 1;

      &.selected {

        order: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding-right: 30px;

        & .close {
          margin: 0 15px 0 auto;
          cursor: pointer;
        }
      }

      &:not(.selected) {

        cursor: pointer;
        font-size: 1.3rem;

        &:hover {
          color: white;
          background-color: $secondary-color;
        }
      }

      & * {
        white-space: pre;
      }
    }
  }


  &.default {
    li {
      font-weight: $bold;
    }

  }

  &.service-header {
    width: 100%;
    min-width: 322px;
    position: relative;

    .select-head {
      background-color: transparent;

      & li {
        font-size: 1.4rem;
      }

    }

    ul.options li {
      font-size: 1.4rem;
    }
  }

  &.search-listbox {
    min-width: unset;
    width: unset;

    .select-head {
      width: 215px;
      height: 37px;
      background-color: $main-color;
      color: white;
      padding-left: 17px;

      & li {
        font-size: 1.4rem;
        color: white;
      }

    }



    ul.options {
      width: 215px;

      li {
        font-size: 1.4rem;
        width: inherit;
        height: 37px;
      }
    }
  }
  &.form-options{
    .select-head {
      background-color: transparent;
      color: $inactive-color;
      font-size: 1.6rem;
      font-weight: $thin;
      // padding-left: 5px;
      border: none;
      border-bottom: 1px solid black;


    }
    .options {
      top:45px;
    }
  }
}


.error-message {
  color: #ee6969;
  font-size: 1.2rem;
  padding-left: 4px;
  margin-top: 5px;
}