@use 'sass:map';
@use 'sass:color';

@use 'common/var.scss'as *;
@use 'mixins/mixins'as *;

#{getClassName((select))} {
  font-size: #{getValName((select, font-size))};

  #{getClassName((input))} {
    font-size: inherit;
  }

  &.is-open #{getClassName((input))} {
    @include set-css-val(input,
      ('border-color': (color, primary)));
  }

  &.is-multiple {
    #{getClassName((select, input))} {
      position: relative;

      #{getClassName((input))} {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
      }

      #{getClassName((input, box))},
      #{getClassName((input, box))} input {
        height: 100%;
      }

      #{getClassName((input, box))} input {
        pointer-events: none;
      }
    }
  }

  &.is-collapse {
    #{getClassName((select, input, tag))} {
      flex-wrap: nowrap;
    }
  }

  &.is-disabled {
    cursor: not-allowed;
  }
}

#{getClassName((select, input, tag))} {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  padding: .2em var(--os-space-l) 0em .2em;
  line-height: 1;
  min-height: 2.2em;
  flex-wrap: wrap;

  #{getClassName((tag))} {
    margin-right: .2em;
    margin-bottom: .2em;
    max-width: 70%;
    font-size: inherit;
  }

  input {
    border: none;
    padding: .28em 0em 0 .8em;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    background-color: transparent;
    flex-grow: 1;
    width: 10%;
    font-size: inherit;
  }
}

#{getClassName((select))} {
  @include set-css-val(select,
    ('font-size': (heading8)));
}

#{getClassName((select, large))} {
  @include set-css-val(select,
    ('font-size': (heading7)));
}

#{getClassName((select, mini))} {
  @include set-css-val(select,
    ('font-size': (heading9)));
}


#{getClassName((select, card))} {
  // overflow: hidden;
  // border-radius: #{getValName((border, radius, base))};
  // background-color: #{getValName((color, neutral, 0))};
  // z-index: 100;
  @include set-popper-card();
  overflow: auto;
  max-height: 280px;
  // #{getClassName((options))} {
  //   overflow: auto;
  //   max-height: 280px;
  // }
}

#{getClassName((select, input))} {
  input[readonly] {
    cursor: pointer;
  }

  input[disabled] {
    cursor: not-allowed;
  }

  // #{getClassName(( input))} {
  //   .os-icon-wrong {
  //     display:none;
  //   }
  //   &:hover {
  //     .os-icon-wrong {
  //       display:inline-block;
  //       + [class^='os-icon'] {
  //         display: none;
  //       }
  //     }
  //   }
  // }
  #{getClassName(( input))} {
    .os-icon-wrong {
      display: none;
    }
  }


  &:hover {
    #{getClassName(( input))} {
      .os-icon-wrong {
        display: inline-block;
        position: relative;
        z-index: 2;

        +[class^='os-icon'] {
          display: none;
        }
      }
    }

  }
}

// #{getClassName((options))} {
//   padding-top: #{getValName((space, xs))};
//   padding-bottom: #{getValName((space, xs))};
//   border: solid 1px;
//   border-color: #{getValName((color, neutral, 2))};
//   border-radius: #{getValName((border, radius, base))};
// }
#{getClassName((options, ul))} {
  margin: 0;
  padding: 0;
  list-style: none;

  li {
    margin: 0;
    list-style: none;
    cursor: pointer;
    transition: all .2s;

    &.is-selected {
      #{getClassName((option, slot))} {
        color: #{getValName((color, primary))};
        font-weight: bold;

        #{getClassName((icon, answer))} {
          display: block;
        }
      }
    }

    &.is-disabled {
      opacity: .5;

      #{getClassName((option, slot))} {
        color: #{getValName((color, neutral, 4))};
      }

      &:hover {
        background-color: transparent;
        cursor: not-allowed;
      }
    }

    &:hover {
      background-color: color.adjust(map.get($colors, primary, base), $alpha: -0.92);
    }

    :disalbed {
      color: #{getValName((color, neutral, 6))};
    }

    #{getClassName((option, slot))} {
      padding: .3em 1em;
      display: flex;
      justify-content: space-between;
      align-items: center;

      #{getClassName((icon, answer))} {
        display: none;
      }
    }
  }
}