import styled from "styled-components";

export const AdminRolesAndPermissionContainer = styled.div`
  button {
    svg {
      width: 24px;
      height: 24px;
    }
  }
  .arp_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;

    .arp_title {
      color: #1c2434;
      font-size: 18px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 10px;
      span {
        display: flex;
        align-items: center;
      }
    }

    .arp_ref {
      color: #64748b;
      font-size: 16px;
      font-weight: 600;
      line-height: normal;
      display: flex;
      align-items: center;
      gap: 8px;

      span {
        color: #3c50e0;
      }

      .slash {
        color: #64748b;
      }
    }
  }

  .arp_main {
    max-width: 500px;
    width: 100%;
    margin: 40px auto 100px;

    .arp_img {
      max-width: 250px;
      width: 100%;
      margin: 0 auto 30px;

      img {
        width: 100%;
      }
    }

    .arp_title {
      margin-bottom: 10px;
      color: #3ac2c2;
      text-align: center;
      font-size: 32px;
      font-weight: 700;
      line-height: normal;
    }

    .arp_subtitle {
      margin-bottom: 40px;
      color: #7c8080;
      text-align: center;
      font-size: 16px;
      font-weight: 500;
      line-height: normal;
      letter-spacing: 0.32px;
    }
  }

  .rll_main_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
  }

  .rll_role_section {
    .rll_sl_header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 10px;
      border-radius: 10px 10px 0px 0px;
      border: 1px solid #b0dcdc;
      background: rgba(58, 194, 194, 0.1);
      color: #747682;
      font-size: 16px;
      font-weight: 600;

      .rll_sl_one {
        width: 30%;
        position: relative;
        display: flex;
        align-items: center;
        gap: 8px;

        .adm_check > span {
          border-radius: 8px;
        }

        span {
          display: flex;
          align-items: center;
        }
      }

      .rll_no_created {
        width: 20%;
        position: relative;

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

      .rll_sl_two {
        width: 22%;
        position: relative;

        &::before {
          content: "";
          height: 22px;
          width: 2px;
          border-radius: 10px;
          position: absolute;
          top: 0%;
          left: -12px;
          display: block;
          background: #d9d9d9;
          transform: translate(-50%);
        }
      }
      .rll_sl_three {
        width: 20%;
        position: relative;

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

    .rll_sl_body {
      .rll_sl_tr {
        display: flex;
        padding: 12px 10px;
        border-bottom: 1px solid #d2c8c8;
        justify-content: space-between;
        align-items: center;

        .rll_content_title {
          display: flex;
          align-items: center;
          gap: 10px;
          color: #03091d;
          font-size: 16px;
          font-weight: 600;
          width: 30%;

          .rll_img {
            width: 25px;
            display: flex;
            align-items: center;
            margin-right: 8px;
            .adm_check > span {
              border-radius: 8px;
            }
          }
        }

        .rll_nc_users {
          width: 20%;
          color: #313333;
          font-size: 16px;
          font-weight: 400;
        }
        .rll_nc_assign {
          width: 22%;
          color: #00c2c2;
          font-size: 16px;
          font-weight: 600;
          display: flex;
          align-items: center;
          gap: 15px;

          span {
            cursor: pointer;
          }

          .rll_img_group {
            position: relative;
            display: flex;
            align-items: center;
            max-width: 90px;
            width: 100%;
            cursor: pointer;

            .rll_img {
              width: 38px;
              height: 38px;
              border-radius: 100%;
              border: 1px solid #c6cccc;
              background: #c6cccc;

              &:nth-child(2) {
                position: absolute;
                left: 26px;
              }
              &:nth-child(3) {
                position: absolute;
                left: 53px;
              }
              img {
                width: 100%;
                border-radius: 100%;
              }
            }
          }
        }

        .rll_action {
          width: 20%;
          color: #00c2c2;
          font-size: 16px;
          font-weight: 600;
          display: flex;
          gap: 50px;
          svg {
            width: 24px;
            height: 24px;
          }
          span {
            display: flex;
            align-items: center;
            gap: 4px;
            cursor: pointer;
          }
        }
      }
    }
  }
`;
