.n-myft-ui__button--viewport-large {
  display: none;

  @include oGridRespondTo('L') {
    display: inline-block;
  }
}

.n-myft-ui__save-button-with-icon {
  --icon-size: 24px;

  display: inline-flex;
  padding: 10px 0px 4px;
  width: 40px;
  color: var(--o3-color-palette-black);
  background: none;
  border: 0;
  flex-direction: column;
  align-items: center;

  &::before {
    content: '';
    width: var(--icon-size);
    height: var(--icon-size);
    background-color: var(--o3-color-palette-black);
    mask-image: var(--o3-icon-bookmark);
    mask-repeat: no-repeat;
    mask-size: contain;
    pointer-events: none;
  }

  .save-button-with-icon-copy {
    position: static;
    line-height: var(--o3-font-lineheight-metric2-negative-2);
    font-size: var(--o3-font-size-metric2-negative-2);
    font-family: var(--o3-font-family-metric);
  }

  &:not([disabled]):hover {
    &::before {
      mask-image: var(--o3-icon-bookmark-filled);
      background-color: var(--o3-color-palette-black-50);
    }
  }

  &[aria-selected='true'],
  &[aria-pressed='true'] {
    &::before {
      mask-image: var(--o3-icon-bookmark-filled);
      background-color: var(--o3-color-palette-claret);
    }
  }
}