.folder_select_wrap {
      right: 0;
      backdrop-filter: blur(9px);
      -webkit-backdrop-filter: blur(9px);
      background-color: rgba(0, 0, 0, 0.72);
      
      @width: 480px;

      .folder_select {
            width: @width;
            height: 100vh;
            background: rgba(248, 249, 253, 0.6);
            overflow-x: hidden;
            overflow-y: scroll;
            overscroll-behavior: contain;

            .btn_close {
                  top: 26px;
                  right: 18px;
                  padding: 1px;
                  border-radius: 36px;
                  cursor: pointer;
                  transition: all ease 0.3s;

                  svg {
                        width: 20px;
                        height: 20px;
                  }
            }

            .head {
                  height: 73px;
                  padding-left: 18px;
                  padding-right: 48px;
                  background-color: rgba(255, 255, 255, 0.1);
                  border-bottom: 1px solid rgba(241, 241, 241, 0.1);

                  .options {
                        margin-right: 9px;

                        .btn_icon_wrap {
                              width: 32px;
                              height: 32px;
                              border-radius: 50%;
                              cursor: pointer;
                              border: 1px solid transparent;

                              &:hover {
                                    background-color: white;
                                    border: 1px solid var(--color_border);
                              }

                              .icon {
                                    padding: 0 4px;
                              }
                        }
                  }

                  .title {
                        font-size: 17px;
                        margin-right: 15px;
                  }

                  .switch {
                        width: 38px;
                        height: 19px;
                        padding: 2px 4px;
                        border-radius: 30px;

                        &.on {
                              padding-right: 6px;
                              background-color: white;

                              .dot {
                                    left: 2px;
                                    background-color: black;
                              }

                              .status {
                                    color: black;
                              }
                        }

                        &.off {
                              background-color: black;

                              .dot {
                                    right: 2px;
                                    background-color: white;
                              }

                              .status {
                                    color: white;
                              }
                        }

                        .dot {
                              top: 2px;
                              width: 15px;
                              height: 15px;
                              border-radius: 50%;
                        }

                        .status {
                              width: 50%;
                              height: 100%;
                              font-size: 10px;
                        }
                  }
            }

            .content_wrap {
                  height: calc(~'100vh - 103px');
                  overflow-y: scroll;

                  .content {
                        padding: 12px;

                        .content_item {
                              width: calc((@width - 24px) / 4);
                              box-sizing: border-box;
                              padding: 6px 12px;
                              padding-bottom: 12px;
                              border-radius: 6px;
                              transition: all ease 0.3s;
                              border: 1px solid transparent;
                              cursor: pointer;

                              &:hover {
                                    border: 1px solid var(--color_border);
                                    background-color: white;
                              }

                              &.folder_item {
                                    padding-top: 4px;
                              }

                              &.image_item {
                                    padding: 12px;
                                    padding-bottom: 9px;
                              }

                              .icon_folder {
                                    width: 100%;
                                    height: calc((@width - 24px) / 4 - 30px);
                                    display: flex;
                                    mask-repeat: no-repeat;
                                    -webkit-mask-repeat: no-repeat;
                                    mask-size: cover;
                                    -webkit-mask-size: cover;
                                    background: linear-gradient(-30deg, purple, orange);
                                    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%20width=%2260%22%20height=%2260%22%3E%3Cpath%20d='M496%20152a56%2056%200%2000-56-56H220.11a23.89%2023.89%200%2001-13.31-4L179%2073.41A55.77%2055.77%200%2000147.89%2064H72a56%2056%200%2000-56%2056v48a8%208%200%20008%208h464a8%208%200%20008-8zM16%20392a56%2056%200%200056%2056h368a56%2056%200%200056-56V216a8%208%200%2000-8-8H24a8%208%200%2000-8%208z'/%3E%3C/svg%3E");
                                    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%20width=%2260%22%20height=%2260%22%3E%3Cpath%20d='M496%20152a56%2056%200%2000-56-56H220.11a23.89%2023.89%200%2001-13.31-4L179%2073.41A55.77%2055.77%200%2000147.89%2064H72a56%2056%200%2000-56%2056v48a8%208%200%20008%208h464a8%208%200%20008-8zM16%20392a56%2056%200%200056%2056h368a56%2056%200%200056-56V216a8%208%200%2000-8-8H24a8%208%200%2000-8%208z'/%3E%3C/svg%3E");
                                    color: rgba(255, 255, 255, 0.5);
                                    font-style: initial;
                                    font-size: 12px;

                                    .children {
                                          right: 8px;
                                          bottom: 27px;
                                    }

                                    .size {
                                          right: 8px;
                                          bottom: 12px;
                                    }
                              }

                              .img_item {
                                    width: 100%;
                                    height: calc((@width - 24px) / 4 - 27px);
                                    margin-bottom: 6px;
                                    border-radius: 6px;
                              }

                              .name {
                                    width: 100%;
                                    font-size: 13px;
                                    text-align: center;
                                    word-break: break-all;
                              }
                        }
                  }
            }

            .nav_info_wrap {
                  height: 30px;
                  padding: 0 27px;
                  font-size: 13px;
                  color: #888;
                  border-top: 1px solid rgba(241, 241, 241, 0.08);
            }
      }
}