@use "design-system";

.icon-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: unset;
  text-align: center;
  width: 64px;

  @include design-system.H7;

  font-size: 12px;
  cursor: pointer;
  color: var(--color-primary-default);

  &__circle {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 36px;
    width: 36px;
    background: var(--color-primary-default);
    border-radius: 99px;
    margin-top: 6px;
    margin-bottom: 4px;
    margin-inline: auto;
  }

  &--disabled {
    opacity: 0.3;
    cursor: auto;
  }

  &__label-large {
    width: 60px; //for ellipsis keeping the width same as icon-button used here
  }
}
