src/components/SInput.scss
@use '../scss/variables' as var;

.s-input {
  display: flex;
  width: var.$size-form-minwidth;
  height: var.$size-form;
  line-height: var.$size-form;
  color: var(--color-form-fg);
  background-color: var(--color-form-bg);

  &-btn {
    flex: 0 0 auto;
    height: var.$size-form;
    width: var.$size-form;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;

    &:hover {
      color: var(--color-form-fg-active);
      background-color: var(--color-form-bg-active);
    }

    & > svg {
      position: relative;
      left: 0.01rem;
      bottom: 0.01rem;
    }
  }

  &-inner {
    display: inline-block;
    border: none;
    outline: none;
    color: var(--color-form-fg);
    background-color: var(--color-form-bg);
    height: var.$size-form;
    line-height: var.$size-form;
    padding: 0 var.$padding-md;
    user-select: auto;
    text-align: center;
    text-shadow: var(--shadow-form);
    border-radius: 0;
    min-width: 0;

    &--active {
      text-shadow: var(--shadow-form-active);
      color: var(--color-form-fg-active);
      background-color: var(--color-form-bg-active);
    }

    &::selection {
      text-shadow: var(--shadow-form-selection);
      color: var(--color-form-fg-selection);
      background-color: var(--color-form-bg-selection);
    }
  }
}
