@use 'src/styles/mixins';

.Icon {
  @include mixins.core;
  align-items: center;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  transition: background-color 0.3s, color 0.3s;

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

  &--button {
    cursor: pointer;

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

  &--disabled {
    color: var(--color-gray-300);
    cursor: default;

    &:hover {
      background: transparent;
    }
  }
}

.TnbIcon {
  margin-right: -6px;
  margin-top: 1px;
}