:root{
    /* Primary */
    --green400: hsl(172, 67%, 45%);
    
    /* Neutral */
    --green900: hsl(183, 100%, 15%);
    --grey500: hsl(186, 14%, 43%);
    --grey400: hsl(184, 14%, 56%);
    --grey200: hsl(185, 41%, 84%);
    --grey50: hsl(189, 47%, 97%);
    --white: hsl(0, 100%, 100%);

    /* Font-size */
    --fs-emphasis: 1.5rem;
    
    /* States */
    --color-error: hsl(15, 62%, 50%);
    --color-disabled: hsl(183, 78.77%, 34.36%);
}

/* Base */
*, *::before, *::after{
    box-sizing: border-box;
}

body{
    min-height: 100vh;
    font: normal 700 1rem/1.5 "Space Mono", monospace;
    background-color: var(--grey200);
}

/* Chrome, Edge, Safari */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

input[type="radio"] {
    position: absolute;
    opacity: 0;

}

/* Layout */
.l-main{
    max-width: 31.25rem;
    margin-inline: auto;
    margin-block-end: 1rem;
}

.logo{
    display: block;
    margin-block: 3em 2em;
    margin-inline: auto;
}

.attribution { text-align: center; font-weight: normal;}
.attribution a { color: hsl(228, 45%, 44%); }

/* Component */
.c-bill-splitter{
    padding: 2rem 1.5rem;
}

.c-bill-splitter__field-label{
    display: block;
    margin-block-end: 0.3em;
}

.c-bill-splitter__field-header{
    display: flex;
    justify-content: space-between;
}

.c-bill-splitter__error{
    color: var(--color-error);
}

.c-bill-splitter__input{
    display: block;
    width: 100%;
    border: none;
    font-size: var(--fs-emphasis);
    font-weight: var(--fw-bold);
    text-align: end;
    padding-block: 0.5em;
    padding-inline: 0.7em;
}

.c-bill-splitter__input::placeholder{
    color: var(--green900);
    opacity: 0.50;
}

.c-bill-splitter__input:focus{
    outline: 0.15rem solid var(--green400);
}

.c-bill-splitter__tip-field{
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: none;
    padding: 0;
    margin: 1.5em 0;
    gap: 1rem;
}

.c-bill-splitter__tip-field > .c-bill-splitter__field-label{
    margin-block-end: 0.8em;
}

.c-bill-splitter__tip-button{
    font-size: var(--fs-emphasis);
    text-align: center;
    padding-block: 0.3em;
}

.c-bill-splitter__tip-button:hover{
    cursor: pointer;
    background-color: var(--grey200);
    color: var(--green900);
    transition: all 0.3s ease;
}

.c-bill-splitter__tip-field > .c-bill-splitter__input{
    padding-block: 0.3em;
}

.c-bill-splitter__input--custom::placeholder{
    opacity: 0.7;
}

.c-bill-splitter__results{
    margin-block-start: 2em;
    padding: 1.5em;
}

.c-bill-splitter__result{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block: 1em;
}

.c-bill-splitter__result-label{
    margin: 0;
}

.c-bill-splitter__result-context{
    display: block;
    font-size: 0.8rem;
    color: var(--grey400)
}

.c-bill-splitter__result-value{
    font-size: 2.125rem;
    color: var(--green400)
}

.c-bill-splitter__reset{
    width: 100%;
    border: none;
    font-size: 1.2rem;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    padding-block: 0.7em;
    margin-block-start: 1em;
}

/* Object */
.o-surface{
    background-color: var(--white);
    border-radius: 0.3rem;
    color: var(--green900);
}

.o-surface--lg{
    border-radius: 1rem;
}

.o-surface--neutral{
    background-color: var(--grey50);
}

.o-surface--strong{
    background-color: var(--green900);
    color: var(--white);
}

/* Utilities */
.u-input-icon{
    background-repeat: no-repeat;
    background-position: 0.75em center;
    padding-left: 1.725em;
}

.u-input-icon--money{
    background-image: url(../images/icon-dollar.svg);
}

.u-input-icon--person{
    background-image: url(../images/icon-person.svg);
}

/* State */
.is-active{
    background-color: var(--green400);
    color: var(--green900);
}

.is-active:hover{
    cursor: pointer;
    background-color: var(--grey200);
    transition: all 0.3s ease;
}

.is-disabled{
    background-color: var(--color-disabled);
    opacity: 0.4;
}

.is-error, .is-error:focus{
    outline: 0.15rem solid var(--color-error);
}