.nut-hoverbutton-item {
  &-container {
    width: $hoverbutton-item-size;
    height: $hoverbutton-item-size;
    border-radius: $hoverbutton-item-size;
    border: scale-px(1px) solid $hoverbutton-item-border-color;
    background-color: $hoverbutton-item-background;

    &:active,
    &-active {
      background-color: $hoverbutton-item-background-active;
    }

    &-harmony {
      margin-bottom: $hoverbutton-spacing;

      &:last-child {
        margin-bottom: 0;
      }
    }

    &-icontext {
      display: flex;
      flex-direction: column;
      align-items: center;

      .nut-icon {
        display: block;
        width: scale-px(14px);
        height: scale-px(14px);
        font-size: $font-size-base;
      }
    }
  }

  &-icon {
    width: scale-px(20px);
    height: scale-px(20px);
    margin: scale-px(9px);
    color: $hoverbutton-item-icon-color;
    fill: $hoverbutton-item-icon-color;

    .nut-icon {
      display: block;
      width: scale-px(20px);
      height: scale-px(20px);
      font-size: $font-size-2xl;
    }
  }

  &-container:active &-icon {
    color: $hoverbutton-item-icon-color-active;
    fill: $hoverbutton-item-icon-color-active;
  }

  &-text-icon {
    width: scale-px(14px);
    height: scale-px(5px);
  }

  &-text {
    font-size: $font-size-xxs;
    margin-top: scale-px(5px);
    line-height: scale-px(9px);
  }
}