@layer base {
  .container {
    width: 100%;
    min-height: 35px;
    height: 35px;
    background: #0000004d;
    border-top: 1px solid #472715;
    box-shadow:
      0px 4px 2px 0px #00000040 inset,
      0px -1.5px 0px 0px #8a582d inset;
    border-radius: 9999px;
    outline: none;
    display: flex;
    align-items: center;
    padding: 0 0 0 14px;
    box-sizing: border-box;
    overflow: hidden;

    &.error {
      outline: 2px solid #af4242;
    }
  }

  .inputWrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 1;
    height: 100%;

    .input {
      background: transparent;
      border: none;
      outline: none;
      color: #fbe6be;
      font-size: 18px;
      line-height: 18px;
      font-weight: 700;
      text-align: center;
      padding: 0;
      min-width: 20px;
      field-sizing: content;
      align-self: stretch;

      &::placeholder {
        color: #fbe6be66;
      }

      &::-webkit-outer-spin-button,
      &::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
    }

    .prefix {
      color: #fbe6be;
      font-size: 18px;
      line-height: 18px;
      font-weight: 700;
    }
  }

  .iconButton {
    margin: 0px 3px;
    padding: 1px;
    cursor: pointer;
    border-radius: 9999px;
    background: radial-gradient(circle, #00000000 0%, #00000000 50%, #fbe6be 50%, #fbe6be 100%);
    box-shadow:
      0px 2px 0px 0px #ffffffbf inset,
      -1px 0px 0px 0px #00000059 inset,
      1px 0px 0px 0px #00000059 inset,
      0px -1px 0px 0px #00000059 inset;

    .icon {
      width: 28px;
      color: #fbe6be;
    }
  }
}
