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

.roles {
  .service-box {
    border: .1rem solid #8BBDFF;
  }
}

.service-box {
  background-color: #F8F8F8;
  //max-width: 430px;
  height: 42px;
  color: $title-color;
  font-size: $info-size;
  display: flex;
  align-items: center;
  border-radius: 4px;
  padding: 0 20px;
  gap: 0.5rem;
  transition: 0.3s;

  span {
    white-space: nowrap;
  }

  .role {
    font-weight: $bold;
  }

  & .add {
    //visibility: hidden;
    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;
    display: none;
  }

  &:hover {
    & .add {
      filter: none;
    }

    & img.enter {
      display: initial;
    }

    background-color: $secondary-color;
    color: white;

    svg {
      fill: #fff;

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

#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;
    }

  }
}