@property --codex-input-group-border-radius {
  syntax: "<length>";
  inherits: false;
  initial-value: 10px;
}

@property --codex-input-group-border-color {
  syntax: "<color>";
  inherits: false;
  initial-value: rgba(150, 150, 150, 0.2);
}

.input-group {
  box-sizing: border-box;

  > div {
    flex-grow: 1;

    > div {
      display: flex;
      align-items: flex-end;

      > div:first-child {
        flex: 1;

        input {
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
          border-right: none;
        }
      }

      > div:nth-child(2) {
        display: flex;
        align-items: center;
        border: 1px solid var(--codex-input-group-border-color);
        border-top-right-radius: var(--codex-input-group-border-radius);
        border-bottom-right-radius: var(--codex-input-group-border-radius);
        height: 64px;
        box-sizing: border-box;

        select {
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
          min-width: 110px;
          border-color: transparent;
          background-color: transparent;
          box-shadow: none;
        }
      }
    }
  }

  p {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 0;

    small {
      height: 15px;
      display: inline-block;
    }
  }
}