@use "../base/variables" as *;
@use "../base/mixins" as *;
@use "../base/typography" as *;

main:has(.mypage__wrap) {
  padding: 8.6rem 2.4rem 2rem;

  @include media("lg") {
    padding: 6rem 1.6rem 11.6rem;
    min-height: 105dvh;
  }
}

.mypage {
  flex: 1 1 76rem;

  @include media("lg") {
    flex: none;
    width: 100%;
  }

  &__group {
    padding: 4rem;
    border-radius: 1.2rem;
    background-color: theme-color($container);
    border: 1px solid theme-color($border-low);

    @include media("lg") {
      padding: 2.4rem 1.6rem;
      border-radius: 0.8rem;
    }
  }

  &__inner {
    margin: 0 auto;
    max-width: 104.4rem;
  }

  &__title {
    @include typography("h2");

    margin-bottom: 1.2rem;
    color: theme-color($text-high);
    font-weight: 700;

    @include media("lg") {
      margin-bottom: 0.8rem;
    }

    &-sub {
      margin-bottom: 2.4rem;

      @include media("lg") {
        margin-bottom: 4rem;
      }

      h3 {
        @include typography("h3");

        color: theme-color($text-high);
        font-weight: 700;

        @include media("lg") {
          font-size: 2rem;
          line-height: 3rem;
        }
      }
    }
  }

  &__wrap {
    display: flex;
    align-items: flex-start;
    gap: 2.4rem;

    @include media("lg") {
      flex-direction: column;
      gap: 1.6rem;
    }
  }

  &__content {
    display: flex;
    align-items: flex-start;
    gap: 4rem;

    @include media("lg") {
      flex-direction: column;
      align-items: center;
      gap: 1.6rem;
    }
  }

  &__thumb {
    flex: 0 0 10.8rem;

    &-profile {
      position: relative;
      width: 10rem;
      height: 10rem;

      img {
        @include img-fit();

        border-radius: 0.8rem;
      }
    }

    &-edit {
      @include flexCenter();

      position: absolute;
      right: 0;
      bottom: 0;
      translate: 50% 50%;
      width: 4.6rem;
      height: 4.6rem;
      background-color: #111;
      border-radius: 50%;

      @include media("lg") {
        width: 4rem;
        height: 4rem;
      }
    }

    &-name {
      margin-top: 1.2rem;
      text-align: center;

      @include media("lg") {
        margin-top: 1rem;
      }

      &-title {
        display: block;
        translate: 0 0.2rem;
        font-weight: 700;
        color: theme-color($text-high);
      }

      &-id {
        @include typography("p2");

        display: flex;
        justify-content: center;
        gap: 0.4rem;
        translate: 0 -0.2rem;
      }
    }
  }

  &__info {
    flex: 1;

    @include media("lg") {
      flex: none;
      width: 100%;
    }

    &-item {
      & + & {
        margin-top: 2.4rem;

        @include media("lg") {
          margin-top: 1.6rem;
        }
      }
    }

    &-label {
      margin-bottom: 0.8rem;
      color: theme-color($text-high);
      font-weight: 500;
    }

    &-error {
      @include typography("p2");

      display: block;
      margin: 0.4rem 0 0.8rem;
      color: theme-color($secondary);
    }

    &-eye-wrap {
      position: relative;

      & + & {
        margin-top: 0.8rem;
      }
    }

    &-eye {
      position: absolute;
      top: 50%;
      right: 1.6rem;
      translate: 0 -50%;
    }
  }

  &__btn {
    margin-top: 2.4rem;
    text-align: right;

    .btn-primary {
      min-width: 9.4rem;

      @include media("lg") {
        min-width: 8.2rem;
      }
    }
  }

  &__withdraw {
    margin-top: 0.8rem;
    text-align: right;

    &-btn {
      background: transparent;
      border: none;
      color: theme-color($text-low);
      font-weight: 500;
    }
  }

  .table__cell--td {
    font-weight: 400;
  }

  .table__cell-date {
    color: theme-color($text-low);
  }
}

.mypage__wallet {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;

  @include media("lg") {
    grid-template-columns: 1fr;
  }

  &-item {
    display: flex;
    flex-direction: column;

    padding: 2.4rem;
    min-width: 0;
    background-color: theme-color($container);
    border-radius: 1.2rem;
    border: 1px solid theme-color($border-low);

    @include media("lg") {
      padding: 2rem 1.6rem;
    }

    &--column {
      grid-column: span 2;

      @include media("lg") {
        grid-column: span 1;
      }
    }

    &--history {
      padding: 2rem 2.4rem;

      @include media("lg") {
        padding: 1.6rem;

        &:has(.mypage__wallet-total) {
          padding: 2rem 1.6rem;
        }
      }

      .mypage__wallet-history-filter {
        margin-bottom: 0;
      }
    }
  }

  &-title {
    @include typography("h3");

    display: block;
    margin-bottom: 0.8rem;
    font-weight: 700;
    color: theme-color($text-high);

    @include media("lg") {
      margin-bottom: 0.4rem;
      font-size: 2rem;
      line-height: 3rem;
    }
  }

  &-balance {
    @include flexCenter(flex-start);

    gap: 0.8rem;
    border-radius: 0.8rem;
    min-height: 4.4rem;
    padding: 0.6rem 1.2rem;

    @include media("lg") {
      padding: 0.6rem 0.8rem;
    }

    [data-theme="dark"] & {
      background-color: rgba(#000, 0.5);
    }

    [data-theme="light"] & {
      background-color: rgba(#fff, 0.5);
    }

    img {
      flex-shrink: 0;
      width: 2.4rem;
      height: 2.4rem;
      object-fit: cover;
    }
  }

  &-amount {
    @include typography("h2");

    font-weight: 700;
    color: theme-color($text-high);

    &--sm {
      @include typography("p1");
    }
  }

  &-jackpot {
    @include flexCenter(space-between);

    flex-wrap: wrap;
    gap: 1.6rem;
    margin-top: 2.8rem;

    @include media("lg") {
      margin-top: 2rem;
    }

    &-item {
      flex: 1;
    }

    &-title {
      @include typography("p2");

      display: block;
      margin-bottom: 0.4rem;
      font-weight: 500;

      @include media("lg") {
        margin-bottom: 0.2rem;
      }
    }

    p {
      @include flexCenter(flex-start);
      flex-wrap: wrap;
      gap: 0.4rem;

      &:has(.badge) {
        gap: 0.2rem;
      }

      img {
        flex-shrink: 0;
        width: 1.6rem;
        height: 1.6rem;
        object-fit: cover;
      }
    }

    &-amount {
      @include typography("h4");

      color: theme-color($text-high);
      font-weight: 700;
    }

    &-rank {
      @include typography("h4");

      color: theme-color($primary);
      font-weight: 700;
    }

    .badge {
      font-weight: 400;
    }
  }

  &-form {
    position: relative;
    margin-bottom: auto;

    &:has(.mypage__wallet-form-prefix) {
      input {
        padding-right: 3.6rem;
      }
    }

    img {
      position: absolute;
      top: 50%;
      left: 1.2rem;
      translate: 0 -50%;
      width: 2.4rem;
      height: 2.4rem;
      object-fit: cover;
    }

    &-prefix {
      position: absolute;
      top: 50%;
      right: 1.2rem;
      translate: 0 -50%;
      font-weight: 500;
      color: theme-color($text-high);
    }

    &-info {
      margin-top: 0.4rem;

      p {
        @include flexCenter(flex-start);
        @include typography("p2");

        gap: 0.2rem;
        margin-bottom: 2rem;

        @include media("lg") {
          margin-bottom: 1.6rem;
        }

        span {
          font-weight: 500;
        }

        strong {
          font-weight: 700;
          color: theme-color($text-high);
        }
      }

      .btn-primary {
        font-weight: 700;

        @include media("lg") {
          height: 4.8rem;
          font-size: 1.6rem;
          line-height: 2.6rem;
        }
      }
    }
  }

  &-history {
    &-title {
      @include typography("h3");

      color: theme-color($text-high);
      font-weight: 700;

      @include media("lg") {
        margin-bottom: 0.4rem;
      }
    }

    &-filter {
      @include flexCenter(space-between);

      gap: 1.2rem;
      margin-bottom: 0.8rem;

      @include media("md") {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
      }

      &-btns {
        @include flexCenter(flex-start);

        gap: 0.4rem;

        @include media("md") {
          width: 100%;

          [class*="btn-"] {
            width: 100%;
            height: 4rem !important;
          }
        }

        [data-theme="dark"] & {
          .btn-ghost {
            background-color: rgba(#fff,0.09);
            border-color: transparent;
          }
        }

        [data-theme="light"] & {
          .btn-ghost {
            background-color: rgba(#fff,0.6);
          }
        }
      }

      &-select {
        width: 22rem;

        @include media("md") {
          width: 100%;
        }
      }
    }
  }

  &-total {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    @include media("md") {
      grid-template-columns: 1fr;
    }

    &-item {
      padding: 1.4rem 1.2rem;
      text-align: center;

      @include media("md") {
        padding: 2rem 1.2rem;

        &:first-child {
          padding-top: 0;
        }

        &:last-child {
          padding-bottom: 0;
        }

        &:not(:last-child) {
          border-right: none !important;

          [data-theme="dark"] & {
            border-bottom: 1px solid rgba(#fff, 0.2);
          }

          [data-theme="light"] & {
            border-bottom: 1px solid #e5e5e5;
          }
        }
      }

      &:not(:last-child) {
        [data-theme="dark"] & {
          border-right: 1px solid rgba(#fff, 0.2);
        }

        [data-theme="light"] & {
          border-right: 1px solid #e5e5e5;
        }
      }
    }

    &-title {
      @include typography("p2");

      display: block;
      margin-bottom: 0.2rem;
      font-weight: 500;

      @include media("md") {
        font-size: 1.4rem;
        line-height: 2rem;
      }
    }

    &-value {
      @include typography("h3");

      color: theme-color($text-high);
      font-weight: 700;

      @include media("md") {
        font-size: 2rem;
        line-height: 3rem;
      }

      &--primary {
        color: theme-color($primary);
      }

      &--secondary {
        color: theme-color($secondary);
      }

      &--case {
        color: #5084f4;
      }
    }
  }
}