.n-myft-ui--instant {
  position: relative;


  .n-myft-ui__button--instant {
    position: relative;
    display: inline-block;
    border: 0;
    padding-left: var(--o3-spacing-4xs);
    padding-right: 36px;
    color: var(--o3-color-palette-black-80);
    font-weight: 400;
    background: transparent;

    &::before {
      --icon-size: 24px;
      content: '';
      position: absolute;
      top: 50%;
      background-color: var(--o3-color-palette-teal-40);
      mask-image: var(--o3-icon-mail);
      mask-repeat: no-repeat;
      mask-size: contain;
      width: var(--icon-size);
      height: var(--icon-size);
    }

    &[aria-pressed='true']::before {
      background-color: var(--o3-color-palette-white);
    }

    &[aria-pressed='true']:hover::before {
      background-color: var(--o3-color-palette-teal-40);
    }

    &:not([disabled]):hover,
    &:not([disabled]):focus {
      background: transparent;
      color: var(--o3-color-palette-black-80);

      @media (max-width: 480px) {
        color: transparent;
      }
    }

    &[aria-pressed='true'] {
      background: transparent;
      color: var(--o3-color-palette-black-80);

      @media (max-width: 480px) {
        color: transparent;
      }
    }

    &::before {
      background-color: var(--o3-color-palette-black-60);
      mask-image: var(--o3-icon-notification-mute);

      left: auto;
      right: var(--o3-spacing-4xs);
      margin-top: calc(var(--o3-spacing-3xs) * -1);
    }

    &:not([disabled]):hover:before,
    &[aria-pressed='true']::before {
      mask-image: var(--o3-icon-notification);
      background-color: var(--o3-color-palette-claret);
    }

    .n-myft-ui--instant--hide-text & {
      margin-top: 5px;
      width: 20px;
      overflow: hidden;
      white-space: nowrap;
      text-indent: -110px;
    }

    // Hide text on mobile screens, show only icon
    @media (max-width: 480px) {
      color: transparent;
      margin-left: -100px;
    }
  }
}