import styled from "styled-components";

export const PreviewPanelContainer = styled.div`
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  right: 0;
  z-index: 4444;
  background-color: rgba(0, 0, 0, 0.3);
  transition: 0.5s;

  .una_main_content {
    position: absolute;
    width: 642px;
    background: #fff;
    height: 100%;
    top: 0;
    right: 0;
    transition: 0.5s;
    overflow-y: scroll;
    padding-bottom: 30px;
    border-radius: 40px 0 0 40px;
    padding: 14px 25px 30px 14px;
  }

  .una_header {
    height: 83px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-radius: 25px;
    background: rgba(0, 194, 194, 0.1);

    .close_icon {
      border-radius: 100%;
      background: #fff;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .una_hd_container {
      display: flex;
      gap: 20px;
      align-items: center;
      .una_hd_img {
        width: 57px;
        height: 57px;
        border-radius: 100%;
        background-color: #7c8080;
        img {
          width: 100%;
          border-radius: 100%;
        }
      }

      .una_hd_content {
        .una_hd_title {
          color: #099;
          font-size: 20px;
          font-weight: 800;
        }

        .una_hd_subtitle {
          color: #637381;
          font-size: 14px;
          font-weight: 400;
        }
      }
    }
  }

  .una_body {
    padding: 16px 10px;
    height: 95%;
    /* overflow-y: scroll; */

    .una_tag_group {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: auto;
      flex-direction: column;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;

      .unassigned_txt {
        margin-top: 17px;
        color: #4a4d4d;
        font-size: 37px;
        font-weight: 500;
        line-height: normal;
      }
    }
  }

  .adp_main_content {
    position: absolute;
    width: 642px;
    background: #fff;
    height: 100%;
    top: 0;
    right: 0;
    transition: 0.5s;
    overflow-y: scroll;
    padding-bottom: 30px;
    border-radius: 40px 0 0 40px;
    padding: 34px;

    .adp_header {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .adp_header_title {
        color: #4a4d4d;
        font-size: 20px;
        font-weight: 600;
        letter-spacing: 0.4px;
      }
    }

    .adp_subtitle {
      color: #adb2b2;
      font-size: 16px;
      font-weight: 400;
      line-height: normal;
      letter-spacing: 0.32px;
      margin-bottom: 8px;
    }
  }

  .adp_body {
    .adp_list_row {
      display: flex;
      padding: 14px 0;
      align-items: center;
      border-bottom: 1px solid #dfe5e5;
      gap: 20px;
      justify-content: space-between;

      .adp_wrapper {
        display: flex;
        gap: 8px;
        align-items: center;
        .adp_img {
          width: 38px;
          height: 38px;
          background: #c6cccc;
          border-radius: 100%;
          img {
            width: 100%;
            border-radius: 100%;
          }
        }

        .adp_title {
          color: #03091d;
          font-size: 16px;
          font-weight: 600;
          margin-bottom: 2px;
        }

        .adp_stat {
          color: #8a8cd9;
          font-size: 14px;
          font-weight: 400;
          display: flex;
          align-items: center;
          gap: 4px;

          span {
            display: block;
            width: 6px;
            height: 6px;
            border-radius: 100%;
            background-color: #95a4fc;
          }
        }
      }
    }
  }

  .asp_main_content {
    position: absolute;
    width: 642px;
    background: #fff;
    height: 100%;
    top: 0;
    right: 0;
    transition: 0.5s;
    overflow-y: scroll;
    padding-bottom: 30px;

    .asp_header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 28px 20px;
      border-bottom: 1px solid #c6cccc;

      .adp_header_title {
        color: #313333;
        font-size: 20px;
        font-weight: 600;
      }
    }

    .asp_body {
      padding: 15px 25px 40px 20px;

      .asp_inner {
        padding: 15px 0;

        .asp_list_row {
          display: flex;
          padding: 14px 0;
          align-items: center;
          gap: 20px;
          justify-content: space-between;
          border-radius: 10px;
          background: #f5f7f7;
          margin-bottom: 10px;
          padding: 10px 15px;

          .asp_wrapper {
            display: flex;
            gap: 8px;
            align-items: center;
            width: 40%;
            .asp_img {
              width: 38px;
              height: 38px;
              background: #c6cccc;
              border-radius: 100%;
              img {
                width: 100%;
                border-radius: 100%;
              }
            }

            .asp_title {
              color: #03091d;
              font-size: 16px;
              font-weight: 600;
              margin-bottom: 2px;
            }

            .asp_stat {
              color: #7c8080;
              font-size: 12px;
              font-weight: 400;
              line-height: normal;
            }
          }

          .asp_assigned {
            width: 40%;
            position: relative;
            padding-left: 20px;

            &::before {
              content: "";
              height: 40px;
              width: 2px;
              border-radius: 10px;
              position: absolute;
              top: -2%;
              left: -12px;
              display: block;
              background: #c6cccc;
              transform: translate(-50%);
            }

            .ass_txt {
              color: #7c8080;
              font-size: 12px;
              font-weight: 400;
              line-height: normal;
              margin-bottom: 2px;
            }

            .ass_subtxt {
              color: #7c8080;
              font-size: 12px;
              font-weight: 400;
              line-height: normal;
            }
          }
          .close_icon {
            width: 10%;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: end;

            &::before {
              content: "";
              height: 40px;
              width: 2px;
              border-radius: 10px;
              position: absolute;
              top: -30%;
              left: -12px;
              display: block;
              background: #c6cccc;
              transform: translate(-50%);
            }
          }
        }
      }
    }
  }
`;
