.wrapper {
  box-sizing: border-box;
  position: relative;
  height: 96px;
  width: 72px;

  & button {
    @mixin style style=normal;
    color: var(--on-normal-neutral-color);

    height: 72px;
    width: 72px;
    border-radius: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    & .icon {
      height: 48px;
      width: 48px;
    }
  }

  &.small {
    height: 64px;
    width: 48px;
    padding-top: 8px;

    & button {
      height: 32px;
      width: 32px;
      margin-left: auto;
      margin-right: auto;
    }

    & .icon {
      height: 20px;
      width: 20px;
    }
  }

  .label {
    color: var(--element-active-color, #1a1a1a);
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;

    text-align: center;
    @mixin font-label;
  }

  &.checked {
    button {
      @mixin style style=selected;
      color: var(--on-selected-active-color);
    }

    .label {
      @mixin font-label-active;
    }
  }
}