@use "@styles/mixin" as *;

.body {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background-color: rgba($color: #fff, $alpha: 0.5);
  backdrop-filter: blur(5px);
  @include flexCenter;

  &_wrapper {
    width: 450px;
    border-radius: 10px;
    background-color: #fff4da;
    box-shadow: inset 0 0 0 1px black;
    padding: 24px;
    gap: 24px;
    @include flexCol;
  }

  &_header {
    display: grid;
    grid-template-columns: 1fr 32px;
    gap: 30px;
    align-items: center;

    &_nav {
      display: grid;
      grid-template-columns: repeat(2, 80px);
      // gap: 1px;

      &_btn {
        display: grid !important;
        place-items: center;
      }
    }

    h3 {
      font-family: "Manrope";
      font-size: 24px;
      font-weight: bold;
      text-transform: uppercase;
      color: #1e1e1e;
      line-height: 32px;
      justify-self: center;
    }
  }

  &_main {
    display: flex;
    flex-direction: column;
    gap: 24px;

    &_input {
      font-family: "Manrope";
      font-size: 16px;
      font-weight: bold;
      text-transform: uppercase;
      color: #1e1e1e;

      display: grid;
      grid-template-columns: 1fr 200px;
      align-items: center;

      input {
        font-family: "Manrope";
        font-size: 16px;
        padding: 4px;
      }
    }
  }

  &_footer {
    display: grid;
    place-items: center;

    &_deposit {
      font-family: "Manrope";
      font-size: 16px;
      font-weight: bold;
      text-transform: uppercase;
      color: #1e1e1e;
      text-align: center;
      justify-content: center;

      &.active {
        background-color: #d8d0d0;
      }
    }
  }
}
