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

:root {
  --backround-hover: #1a73e8;
  --border: #8BBDFF;
  --border-hover: #8BBDFF;
}

:root[data-theme="dark"] {
  --backround-hover: #20262E;
  --border: #40474F;
  --border-hover: #ccc;
}


.roles {
  .service-box {
    border: 1px solid var(--border);
  }
}

.service-box {

  background-color: $grayish-box-background;
  height: 52px;
  color: $title-color;
  font-size: $info-size;
  display: flex;
  align-items: center;
  border-radius: 4px;
  padding: 0 20px;
  transition: 0.3s;


  &.requires-extra-auth {


    img.certified{
      transition: 0.25s all;
      margin-left: auto;
      margin-right: 10px;
    }

    img.enter{
      margin-left: unset;
    }
  }

  span {
    white-space: nowrap;
  }

  .role {
    font-weight: $bold;
  }

  & .add {
    transition: 0.3s;
    filter: brightness(0) saturate(100%) invert(8%) sepia(49%) saturate(6347%) hue-rotate(245deg) brightness(85%) contrast(122%);
  }

  &.fav .add{
    visibility: hidden;
  }

  & img.enter {
    margin-left: auto;
    visibility: hidden;

  }

  &:hover {

    & .add {
      filter: none;
    }

    & img.enter {
      visibility: visible;
    }

    & img.certified{

      filter: brightness(0) saturate(100%) invert(95%) sepia(100%) saturate(0%) hue-rotate(131deg) brightness(100%) contrast(104%);
    }

    background-color: var(--backround-hover);
    border-color: var(--border-hover);
    color: $white;

    svg {
      fill: white;

      &#gatekeeper {
        stroke: white;
      }
    }
  }
}

#Services {

  .service-box {
    height: 11.6rem;
    gap: 6rem;
    border: .2rem solid #DFEAF7;
    background-color: $white;
    border-bottom: .3rem solid $secondary-color;
    border-radius: 0;

    &:hover {
      border-bottom: .3rem solid #DFEAF7;
      background-color: $secondary-color;
    }

    &--role-module {
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex: 1;
    }

    &--module,
    .role {
      font-size: 1.5rem;
      line-height: 1.8rem;
    }

  }
}