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


:root {
  --hypertitle-color: #1A73E8;
}

:root[data-theme="dark"] {
  --hypertitle-color: #ccc;
}
.setting-box {
  position: relative;
  padding: 2.2rem;
  border: 1px solid $generic-block-border;
  height: 100%;
  min-height: 140px;
  display: flex;
  justify-content: flex-start;
  gap: 3.4rem;
  background: $white-box-background;

  img, svg {
    width: 35px;
    filter: $svg-default;

  }

  &:hover {
    background-color: $secondary-color;
    border: 1px solid $secondary-color;

    img {

      filter: brightness(0) invert(1);
    }
  }

  .icon {
    align-self: center;

  }

  .hypertitle {
    color: var(--hypertitle-color);
    min-height: 15px;
  }

  .info-text{
    margin-top: 10px;
font-weight: 200;
    font-size: 1rem;
    color: $text-color;
    font-style: oblique;
  }

  .certified {
    width: 60px;
    margin-left: auto;
  }

  &.requires-extra-auth {
    background: $rolebox-background;
  }

  &:hover {
    background-color: $secondary-color !important;

    svg,
    .alternative-tooltip--img {
      filter: brightness(0) invert(1);
    }

    .change-on-hover {
      color: white !important;
    }

    .info-text{
      color: $white;
    }
  }
}

.settings-cat-header {
  svg{
   filter:  $svg-default;
  }
}