@use "_theme.scss";

.draft-item-actions {
  .continue-button {
    min-width: 100px;

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

  .action-links {
    display: flex;
    flex-direction: row;
    margin-top: 20px;
    margin-bottom: 1px;
    justify-content: flex-end;
    width: 100%;

    @media (max-width: theme.$sm) {
      margin-top: 0;
    }

    .action-link {
      background-color: inherit;
      border: none;
      padding: 0;
      color: var(--color-highlight);
      font-size: var(--text-size-label);
      cursor: pointer;

      @media (max-width: theme.$xs) {
        font-size: var(--text-size-regular);
      }

      &:focus:not(:focus-visible) {
        outline: none;
      }

      &:focus-visible {
        outline: 2px solid var(--dark);
      }

      &:hover:not(:disabled) {
        text-decoration: underline;
      }

      &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }
    }

    & > *:not(:last-child) {
      margin-right: 20px;
    }

    .action-separator {
      color: var(--text-color-light);
      font-size: var(--text-size-label);

      @media (max-width: theme.$xs) {
        font-size: var(--text-size-regular);
      }
    }

    .divider {
      border-right: 1px solid var(--color-line);
    }
  }
}
