@use "./components/mixins" as *;

.gears_materia {
  position: relative;
  display: inline-block;
  width: 54px;
  margin: auto -2px;
  line-height: 26px;
  text-align: center;
  border-radius: 2px;
  &:not(:empty):after {
    content: " ";
    position: absolute;
    left: 5px;
    right: 5px;
    bottom: 4px;
    border-bottom: 2px solid;
    opacity: 0.1;
    .gears_materias-same-width & {
      display: none;
    }
  }
  .app-edit & {
    &:hover {
      z-index: 1;
      background-color: #0000000f;
    }
    &:active,
    &.-active {
      z-index: 1;
      background-color: #0000001a;
    }
    &:empty:before {
      content: " ";
      display: inline-block;
      height: 16px;
      width: 16px;
      vertical-align: -3px;
      border: 2px solid transparent;
      border-radius: 50%;
    }
  }
  .gears_item.-synced & {
    opacity: 0.2;
  }
  &.-normal {
    color: #155724;
    //color: mix($green, #000, 60%);
    .app-high-saturation & {
      color: #007a2b;
    }
    &:empty:before {
      border-color: transparentify(#c3e6cb);
    }
  }
  &.-advanced {
    color: #721c24;
    //color: mix($red, #000, 63%);
    .app-high-saturation & {
      color: #9c0010;
    }
    &:empty:before {
      border-color: transparentify(#f5c6cb);
    }
  }
}
