.myft-pin-divider {
  height: 18px;
  width: 1px;
  background: var(--o3-color-palette-black-10);
  margin: 0 1px;
}

.myft-pin-button-wrapper .myft-pin-button {
  --icon-size: 24px;

  background-color: transparent;
  border: 0;
  padding: 0;
  position: relative;

  width: var(--icon-size);
  height: var(--icon-size);

  &::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--o3-color-palette-black-60);
    mask-image: var(--o3-icon-pin);

    mask-repeat: no-repeat;
    mask-size: contain;
  }

  &[aria-pressed='true'],
  &:not([disabled]):hover {
    &::after {
      background-color: var(--o3-color-palette-claret);
      border: 0;
    }
  }
}

.myft-pin-button-wrapper {
  .o-tooltip--myft-pin-button {
    min-width: 200px;
  }

  > form {
    display: flex;
  }
}

.myft-pin-button-wrapper.loading {
  position: relative;
  form {
    visibility: hidden;
  }
  &:after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    content: ' ';
    display: block;
    width: 12px;
    height: 12px;
    margin: 0 auto;
    border-radius: 50%;
    border: 3px solid var(--o3-color-palette-black-60);
    border-color: var(--o3-color-palette-black-60) transparent;
    animation: lds-dual-ring 1.2s linear infinite;
    @keyframes lds-dual-ring {
      0% {
        transform: translate(-50%, -50%) rotate(0deg);
      }
      100% {
        transform: translate(-50%, -50%) rotate(360deg);
      }
    }
  }
}