.mykn-dateinput {
  display: inline-flex;

  &__input[aria-hidden="true"] {
    opacity: 0;
    position: absolute;
    visibility: hidden;
    width: 0;
    z-index: -10;
  }

  .mykn-input {
    box-sizing: content-box;
    text-align: center;
    min-width: 2em;
    max-width: 4em;
    flex-shrink: 1.2;
  }

  .mykn-input:focus {
    z-index: 10;
  }

  .mykn-input[data-section="YY"] {
    min-width: 3em;
    flex-shrink: 1;
  }

  .mykn-input:has(+ .mykn-input) {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    border-inline-end-style: dashed;
  }

  .mykn-input + .mykn-input {
    border-inline-start: none;
    border-start-start-radius: 0;
    border-end-start-radius: 0;
  }
}