.skills {
  &.editable .skill {
    .info {
      padding: $unit-half * 1.5;

      & > img,
      & > div.placeholder {
        width: $unit-4x;
        height: $unit-4x;
      }
    }
  }
}

.skill {
  display: flex;
  align-items: stretch;
  justify-content: space-between;

  &.editable {
    &:hover {
      cursor: pointer;

      .info {
        &:hover {
          background-color: var(--button-bg-hover);
        }

        & > img.editable,
        & > div.placeholder.editable {
          border: $hover-stroke;
          box-shadow: $hover-shadow;
          cursor: pointer;
          transform: $scale-tall;
        }

        & p.placeholder {
          color: var(--text-tertiary-hover);
        }

        & svg {
          fill: var(--icon-secondary-hover);
        }
      }
    }
  }

  &.small {
    .info {
      padding: $unit-half * 1.5;

      .placeholder.image,
      img {
        width: $unit-4x;
        height: $unit-4x;
      }
    }
  }

  .info {
    align-items: center;
    border-radius: $input-corner;
    display: flex;
    flex-grow: 1;
    gap: $unit;

    & > img,
    & > div.placeholder {
      background: var(--card-bg);
      border-radius: calc($unit / 2);
      border: 1px solid rgba(0, 0, 0, 0);
      width: $unit-5x;
      height: $unit-5x;
    }

    & > div.placeholder {
      display: flex;
      align-items: center;
      justify-content: center;

      & > svg {
        fill: var(--icon-secondary);
        width: $unit-2x;
        height: $unit-2x;
      }
    }
  }

  & > .Button {
    justify-content: center;
    max-width: $unit-6x;
    height: auto;
  }

  p {
    color: var(--text-primary);

    &.placeholder {
      color: var(--text-tertiary);
    }
  }
}