/*
  Note: If you add a color here, please add it to "/stories/base/colors.css" as well
*/

/* ==========================================================================
  Fonts
  ========================================================================== */

/* ==========================================================================
  All typography variants

  $unit - Either em or rem
  ========================================================================== */

.textButton {
    padding: 0;
    border: 0;
    opacity: 0.8;
    background: none;
    color: #4b453d;
    font-size: 1rem;
    white-space: nowrap;
    transition-property: opacity, color;
    transition-duration: 0.2s;
    transition-timing-function: ease
}

.textButton:not([disabled]) {
        cursor: pointer;
    }

.textButton:hover,
    .textButton:focus {
        opacity: 1;
    }

.textButton[disabled] {
        opacity: 0.3;
    }

.textButton .text {
        display: inline-block;
        vertical-align: middle;
    }

.textButton .icon {
        vertical-align: middle;
    }

.textButton.large .text {
            font-family: "IbmPlexMono", monospace;
            font-weight: 400;
            font-size: 1.6rem;
            line-height: calc(2.4em / 1.6);
        }

.textButton.large.left .icon {
            margin-right: 1.6rem;
            font-size: 1.6rem;
        }

.textButton.large.right .icon {
            margin-left: 1.6rem;
            font-size: 1.6rem;
        }

.textButton.small .text {
            font-family: "IbmPlexMono", monospace;
            font-weight: 400;
            font-size: 1.2rem;
            line-height: calc(2em / 1.2);
        }

.textButton.small.left .icon {
            margin-right: 1.2rem;
            font-size: 1.2rem;
        }

.textButton.small.right .icon {
            margin-left: 1.2rem;
            font-size: 1.2rem;
        }