@use "./variables" as v;

@media (max-width: 440px) {
  .notip {
    width: fit-content;
    max-width: calc(100% - 40px);
  }
}
@media (max-width: 850px) {
  .btn-back {
    display: block;
  }
  .header {
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    animation: slide_left_in 0.5s;
    background-color: v.$px2;
    .header-identification {
      background-color: v.$px2;
    }
    &.out {
      animation: slide_left_out 0.5s forwards;
    }
  }
  .nav {
    width: max-content;
    max-width: calc(100% - 30px);
    height: fit-content;
    padding: 0;
    top: auto;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    animation: slide_navnrw_in 0.5s;
    background-color: #00000000;
    .box {
      padding: 5px;
      margin: 0 auto;
      width: fit-content;
      max-width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 5px;
      background-color: v.$px2;
      border-radius: 15px;
      overflow-x: auto;
      .btn {
        flex-shrink: 0;
        padding: 10px;
        margin-bottom: 0;
        width: fit-content;
        height: fit-content;
        border-radius: 0;
        text-align: center;
        align-content: center;
        border-bottom: none;
        border-left: none;
        border-radius: 10px;
        p {
          font-size: 0.9em;
        }
        &.nav-find {
          display: none;
        }
        &.selected {
          background-color: v.$pm1;
          color: v.$px1;
          border-bottom: none;
          border-left: none;
        }
      }
    }
    &.out {
      animation: slide_navnrw_out 0.5s forwards;
    }
  }
  .pmcenter {
    top: 50px;
    left: 0;
    width: 100%;
    animation: slide_left_in 0.5s;
    &.out {
      animation: slide_left_out 0.5s forwards;
    }
  }
  .pmcontent {
    top: 0;
    left: 0;
    width: 100%;
    animation: slide_left_in 0.5s;
    &.out {
      animation: slide_left_out 0.5s forwards;
    }
  }
  .Chats {
    padding-bottom: 95px;
    .type-list {
      padding: 20px 10px;
    }
  }

  [data-theme="light"] {
    .header {
      background-color: v.$pWhiteWall;
      .header-identification {
        background-color: v.$pWhiteWall;
      }
    }
    .nav {
      background-color: #00000000;
      .box {
        background-color: v.$pMintWhite;
        box-shadow: 0 -1px 1px rgba($color: v.$pDarkMintGreen, $alpha: 0.75);
        .btn {
          &.selected {
            background-color: v.$pWhiteWall;
            color: v.$pDarkMintGreen;
          }
        }
      }
    }
  }
}
