.JobSkillResult {
  border-radius: 6px;
  display: flex;
  gap: $unit;
  padding: $unit * 1.5;
  align-items: center;

  &:hover {
    background: var(--button-contained-bg);
    cursor: pointer;

    .Info h5 {
      color: var(--text-primary);
    }
  }

  .Info {
    display: flex;
    flex-direction: row;
    gap: $unit-half;
    width: 100%;

    .skill.pill {
      background: $grey-90;
      border-radius: $unit * 2;
      color: $grey-15;
      display: inline;
      font-size: $font-tiny;
      font-weight: $medium;
      padding: $unit-half $unit;

      &.buffing {
        background-color: $light-bg-10;
        color: $light-text-10;
      }

      &.debuffing {
        background-color: $water-bg-10;
        color: $water-text-10;
      }

      &.healing {
        background-color: $wind-bg-10;
        color: $wind-text-10;
      }

      &.damaging {
        background-color: $fire-bg-10;
        color: $fire-text-10;
      }

      &.field {
        background-color: $dark-bg-20;
        color: $dark-text-10;
      }
    }

    h5 {
      color: var(--text-tertiary);
      display: inline-block;
      font-size: $font-medium;
      font-weight: $medium;
      flex-grow: 1;
    }
  }

  img {
    width: $unit-6x;
    height: $unit-6x;
  }
}