@import '../../scss/styles.scss';

@layer payload-default {
  .point {
    position: relative;

    & .input-wrapper {
      position: relative;
    }

    &__wrap {
      display: flex;
      width: calc(100% + #{base(1)});
      margin: 0;
      margin-left: base(-0.5);
      margin-right: base(-0.5);
      list-style: none;
      padding: 0;

      li {
        padding: 0 base(0.5);
        width: 50%;
      }
    }

    input {
      @include formInput;
    }
  }

  html[data-theme='light'] {
    .point {
      &.error {
        input {
          @include lightInputError;
        }
      }
    }
  }

  html[data-theme='dark'] {
    .point {
      &.error {
        input {
          @include darkInputError;
        }
      }
    }
  }
}