@import "../../../assets/scss/variables";

:root {
--extra-auth: #E8F2FB;
  --extra-auth-hover:E8F2FB;
}

:root[data-theme="dark"] {
  --extra-auth: #40474F;
  --extra-auth-hover: #2F363E;
}
$extra-auth-hover:var(--extra-auth-hover);
.dashboard-services {


  .dua-service-box {
    height: 110px;
    padding: 30px 22px;
    border: 1px solid $generic-block-border;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    display: flex;
    background: $white-box-background;

    p {
      font-size: 1.6rem;
      color: $title-color;
      font-weight: normal;
    }

    &:hover {
      border-color: $generic-block-border-hover;
      background-color: $app-background;
    }

    img.enter {
      position: absolute;
      right: 21px;
      bottom: 40px;

    }


    img {
      filter: $svg-default;
    }


    &.requires-extra-auth {
      &:hover {
        border-color: $generic-block-border-hover;
        background: $extra-auth-hover;
      }
      background: var(--extra-auth);

      img.certified {

        margin-left: auto;
        margin-right: 35px;
      }

    }
  }
}


//@import "../../../assets/scss/variables";
//
//:root {
//  --extra-auth: #E8F2FB;
//  --extra-auth-hover: #E8F2FB;
//}
//
//:root[data-theme="dark"] {
//  --extra-auth: #40474F;
//  --extra-auth-hover: #2F363E;
//}
//
//$extra-auth-hover: var(--extra-auth-hover);
//
//.dashboard-services {
//
//  // Scroll cap: show up to 3 rows (9 services at 3 per row), then scroll.
//  // 3 boxes of 110px + 2 vertical gy-4 gaps (1.5rem = 15px at 10px root font-size).
//  $service-box-height: 110px;
//  $service-row-gap: 15px;
//  $visible-rows: 3;
//  $services-max-height: ($service-box-height * $visible-rows) + ($service-row-gap * ($visible-rows - 1));
//
//  // Collapsible variant — overrides the base rolebox behavior only inside this section.
//  // Uses the grid-template-rows trick so the body animates open/closed to its natural
//  // height; once open, the inner .row becomes the scroll container.
//  .rolebox {
//    margin-bottom: 0; // section spacing handled by mb-7 on the parent <section>
//
//    .rolebox-body {
//      display: grid;
//      grid-template-rows: 0fr;
//      transition: grid-template-rows 0.5s;
//      height: auto; // neutralize the base height: 100%
//
//      > .row {
//        overflow: hidden;
//        min-height: 0;
//      }
//    }
//
//    &.open .rolebox-body {
//      grid-template-rows: 1fr;
//      padding-bottom: 25px;
//      max-height: none; // neutralize the base 300px / overflow: auto
//      overflow: hidden;
//
//      > .row {
//        max-height: $services-max-height;
//        overflow-y: auto;
//        overscroll-behavior: contain; // don't chain scroll to the page at the edges
//        padding-right: 8px; // breathing room so the scrollbar doesn't sit on the boxes
//      }
//    }
//  }
//
//  .dua-service-box {
//    height: 110px;
//    padding: 30px 22px;
//    border: 1px solid $generic-block-border;
//    border-radius: 5px;
//    cursor: pointer;
//    position: relative;
//    display: flex;
//    background: $white-box-background;
//
//    p {
//      font-size: 1.6rem;
//      color: $title-color;
//      font-weight: normal;
//    }
//
//    &:hover {
//      border-color: $generic-block-border-hover;
//      background-color: $app-background;
//    }
//
//    img.enter {
//      position: absolute;
//      right: 21px;
//      bottom: 40px;
//    }
//
//    img {
//      filter: $svg-default;
//    }
//
//    &.requires-extra-auth {
//      background: var(--extra-auth);
//
//      &:hover {
//        border-color: $generic-block-border-hover;
//        background: $extra-auth-hover;
//      }
//
//      img.certified {
//        margin-left: auto;
//        margin-right: 35px;
//      }
//    }
//  }
//}