@import "./common/var.scss";
@import "./mixins/mixin.scss";

@include b(codeinput-x) {
  width: 100%;
  height: 100%;

  .is-border{
    border: 1px solid $sk-border-primary;
  }
  .is-danger{
    border: none;
    border-bottom: 1px solid $--color-danger;
  }
}

@include b(code-input){
  border-radius: 3px;
  box-sizing: border-box;
  text-align: center;
  height: calc(100% - 10px);
  margin: 5px;
  border: none;
  border-bottom: 1px solid $sk-border-primary;
  flex: 1;
  &:focus{
    outline: none;
    border: none;
    border-bottom: 2px solid $sk-border-primary;
  }
  &:focus.is-border{
    outline: none;
    border: 2px solid $sk-border-primary;
  }
  &:focus.is-danger:not(.is-border){
    outline: none;
    border-bottom: 2px solid $--color-danger;
  }
  &:focus.is-danger.is-border{
    outline: none;
    border: 2px solid $--color-danger;
  }
}