mars-interface/src/components/common/InputSection/InputSection.module.scss

@import 'src/styles/master';

.container {
  border-radius: $borderRadiusL;
  display: flex;
  flex-direction: column;
  @include padding(0, 3);

  .unstakeUpperInputInfo {
    align-self: center;
    display: flex;
    flex-direction: row;
    width: rem-calc(420);
    margin-bottom: space(1);
    margin-top: space(4);
    max-width: 100%;

    .spacer {
      width: rem-calc(20);
    }

    .info {
      flex: auto;
      opacity: 0.3;
      text-transform: none;

      .block {
        display: inline-block;

        &:first-child {
          margin-inline-end: space(1);
        }
      }
    }

    .xMarsRatio {
      text-align: end;
    }
  }

  .available {
    align-self: center;
    @include margin(2, 0, 0);
    opacity: 0.3;
    @include typoXXS;
    border: none;

    &:hover,
    &:focus,
    &:active {
      border: none;
    }
  }

  .warning {
    color: $colorInfoVoteAgainst;
    align-self: center;
    align-content: center;
    margin-bottom: space(5);
    text-align: center;
  }

  .inputContainer {
    max-width: 100%;
    width: 100%;
    display: flex;
    align-self: center;
    position: relative;

    .input {
      align-self: center;
      display: flex;
      margin-bottom: space(5);
      position: relative;
      width: 100%;
    }

    .sliderButton {
      color: $fontColorLightPrimary;
      opacity: 0.6;
      height: rem-calc(24);
      @include margin(1, 2, 0, 2);
      @include typoXS;
      background: none;
      border: none;
      cursor: pointer;
      word-break: keep-all;

      &.zero {
        @include typoS;
      }

      &.maxButton {
        margin-inline-end: 0;
      }
    }
  }

  .inputWarning {
    position: absolute;
    top: rem-calc(-70);
    left: 0;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    @include typoS;
  }

  .inputWrapper {
    align-self: center;
    opacity: 1;
    border: 1px solid $colorGreyHighlight;
    width: rem-calc(448);
    max-width: 100%;
    height: rem-calc(56);
    border-radius: $borderRadiusS;
    display: flex;
    justify-content: center;

    .inputPercentage {
      text-align: center;
      opacity: 1;
      background: none;
      border: none;
      color: $fontColorLightPrimary;
      @include typoXXL;

      &::placeholder {
        text-indent: rem-calc(-14);
      }

      &:focus {
        outline: none;
      }
    }

    input::-webkit-inner-spin-button {
      appearance: none;
      @include margin(0);
    }
  }

  .inputRaw {
    align-self: center;
    background: none;
    margin-top: space(2);
    opacity: 0.4;
    margin-bottom: space(9);
  }

  .actionButton {
    display: flex;
    justify-content: center;
    margin-bottom: space(3);
  }
}

.feeTooltipContent {
  display: flex;
  flex-direction: column;
}

.fee {
  cursor: pointer;
}

.reminder {
  display: flex;
  justify-content: center;

  .content {
    margin-top: space(5);
    width: rem-calc(448);
    text-align: center;
    align-self: center;

    .link {
      color: $colorPrimary;
    }
  }
}

@media only screen and (min-width: $bpMediumLow) {
  .container {
    .inputContainer {
      @include padding(0, 8);
    }

    .inputWarning {
      top: rem-calc(-50);
      left: 20%;
      width: 60%;
    }
  }
}