ujiro99/tlt

.icon-button {
  @apply border-none;
  @apply rounded-md;
  @apply transition;
  @apply ease-out;
  @apply text-center;
  @apply select-none;

  &:hover {
    background-color: var(--bg-gray-100);
  }

  --size: 2rem;

  width: var(--size);
  height: var(--size);
  position: relative;

  &__icon {
    @apply fill-gray-400;
    @apply text-gray-400;
    @apply group-hover:fill-gray-600;
    @apply group-hover:text-gray-600;
    width: 16px;
    height: 16px;
    margin: 0 auto;
  }

  &__label {
    @apply text-gray-700;
    position: relative;
    font-size: 10px;
    line-height: 0.8;
    top: -2px;
  }

  &.mod--sync {
    .icon-button__icon {
      position: relative;
      top: -3px;
      width: 20px;
      height: 20px;
      margin-bottom: -4px;
    }
  }

  &.mod--edit {
    .icon-button__icon {
      position: relative;
      width: 22px;
      height: 22px;
      margin-top: -4px;
      margin-bottom: -2px;
    }
  }

  &.mod--save {
    .icon-button__icon {
      position: relative;
      left: 1px;
      width: 20px;
      height: 20px;
      margin-top: -2px;
      margin-bottom: -2px;
    }
  }

  &.mod--alarm {
    .icon-button__icon {
      position: relative;
      top: -2px;
      width: 20px;
      height: 20px;
      margin-bottom: -4px;
    }
  }
}