/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */

.two-step-button {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  font-size: $body-size;
  line-height: 1;

  &.has-inline-text {
    display: inline-flex;
    align-items: center;

    button {
      margin-left: 0.5ch;
    }

    .confirmation-text {
      position: absolute;
      left: auto;
      right: 0;
      top: auto;
      margin-right: 100%;
    }
  }

  &.has-fading-background .confirmation-text {
    padding: 0.5rem 0 0.5rem 4rem;
    background: linear-gradient(to left, white, white 90%, transparent 100%);
  }

  .confirmation-text {
    position: absolute;
    left: 0;
    top: -1.5em;
    font-size: $body-size;
    line-height: 1;
    font-weight: $weight-normal;
    color: darken($grey-blue, 20%);
    white-space: nowrap;

    &.is-right-aligned {
      left: auto;
      right: 0;
    }

    &.inherit-color {
      color: currentColor;
    }
  }
}