/*
  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
  ========================================================================== */

.inputContainer {
    display: inline-flex
}

.inputContainer:hover label span {
        color: rgb(75, 69, 61)
    }

.inputContainer:hover label span::before {
            border-color: rgba(75, 69, 61, 0.8);
        }

.inputContainer label {
        position: relative;
        cursor: pointer
    }

.inputContainer label span {
            will-change: color;
            font-family: "IbmPlexMono", monospace;
            font-weight: 400;
            font-size: 1.6rem;
            line-height: calc(2.4em / 1.6);
            margin-left: calc(1.6rem + 1.2rem);
            color: rgba(75, 69, 61, 0.7);
            transition: color 0.2s ease
        }

.inputContainer label span::before {
                content: "";
                box-sizing: border-box;
                will-change: border;
                position: absolute;
                top: 50%;
                left: 0;
                width: 1.6rem;
                height: 1.6rem;
                transform: translateY(-50%);
                border: 1px solid rgba(75, 69, 61, 0.3);
                border-radius: 50%;
                transition: border 0.2s ease;
            }

.inputContainer label input {
            position: absolute;
            opacity: 0;
            cursor: pointer
        }

.inputContainer label input:checked + span {
                    color: rgb(75, 69, 61)
                }

.inputContainer label input:checked + span::before {
                        border: 0.6rem solid #d4b58b;
                    }