@import url('_variables.css');

/* ------------------------------ *\
 * peachcloud.css
 *
 * Index
 * - ALIGNMENT
 * - BUTTONS
 * - CARDS
 * - CAPSULES
 * - CIRCLES
 * - COLORS
 * - GRIDS
 * - HTML
 * - FLASH MESSAGE
 * - FONTS
 * - ICONS
 * - INPUTS
 * - LABELS
 * - LINKS
 * - LISTS
 * - METERS
 * - NAVIGATION
 * - RADIAL MENU
 * - SWITCHES / SLIDERS
 * - PARAGRAPHS
 *
\* ------------------------------ */

/*
 * ALIGNMENT
 */

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.center-text {
    text-align: center;
}

.center-vert {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.push-right {
    margin-left: auto;
    padding-right: 0;
}

.top-left {
    /* place-self combines align-self and justify-self */
    place-self: end center;
}

@media only screen and (min-width: 600px) {
    .top-left {
        place-self: end;
    }
}

.top-right {
    place-self: end center;
}

@media only screen and (min-width: 600px) {
    .top-right {
        place-self: end start;
    }
}

.top-middle {
    place-self: center;
}

@media only screen and (min-width: 600px) {
    .top-middle {
        padding-bottom: 2rem;
        place-self: center;
    }
}

.middle {
    place-self: center;
    grid-column-start: 1;
    grid-column-end: 4;
}

.bottom-middle {
    place-self: center;
}

@media only screen and (min-width: 600px) {
    .bottom-middle {
        padding-top: 2rem;
        place-self: center;
    }
}

.bottom-left {
    place-self: start center;
}

@media only screen and (min-width: 600px) {
    .bottom-left {
        place-self: start end;
    }
}

.bottom-right {
    place-self: start center;
}

@media only screen and (min-width: 600px) {
    .bottom-right {
        place-self: start;
    }
}

/*
 * BUTTONS
 */

.button {
    border: 1px solid var(--near-black);
    border-radius: var(--border-radius-2);
    /* Needed to render inputs & buttons of equal width */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: var(--near-black);
    cursor: pointer;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    font-size: var(--font-size-5);
    font-family: var(--sans-serif);
    width: 80%;
    margin-top: 5px;
    margin-bottom: 5px;
}

.button-primary {
    background-color: var(--light-gray);
}

.button-primary:hover {
    background-color: var(--primary);
}

.button-primary:focus {
    background-color: var(--primary);
    outline: none;
}

.button-secondary {
    background-color: var(--light-gray);
}

.button-secondary:hover {
    background-color: var(--light-silver);
}

.button-secondary:focus {
    background-color: var(--light-silver);
    outline: none;
}

.button-warning {
    background-color: var(--light-gray);
}

.button-warning:hover {
    background-color: var(--light-red);
}

.button-warning:focus {
    background-color: var(--light-red);
    outline: none;
}

/*
 * CAPSULES
 */

.capsule {
    padding: 1rem;
    border: var(--border-width-1) solid;
    border-radius: var(--border-radius-3);
    background-color: var(--light-gray);
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/*
 * CARDS
 */

.card {
    min-height: 50vh;
    max-height: 90vh;
    position: relative;
    width: 100%;
}

@media only screen and (min-width: 600px) {
    .card {
        min-height: 50vh;
        max-height: 90vh;
        width: 20rem;
    }
}

.card-container {
    justify-content: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.card-text {
    margin: 0;
    font-size: var(--font-size-5);
    padding-bottom: 0.3rem;
}

.container {
    display: grid;
    grid-template-columns: 2fr 5fr 2fr;
    grid-template-rows: auto;
    grid-row-gap: 1rem;
    align-items: center;
    justify-items: center;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

/*
 * CIRCLES
 */

.circle {
    align-items: center;
    border-radius: 50%;
    box-shadow: var(--box-shadow-3);
    display: flex;
    justify-content: center;
    position: relative;
}

.circle-small {
    height: 5rem;
    width: 5rem;
}

.circle-medium {
    height: 8rem;
    width: 8rem;
}

.circle-large {
    height: 13rem;
    width: 13rem;
}

.circle-success {
    background-color: var(--success);
    color: var(--white);
    font-size: var(--font-size-4);
}

.circle-warning {
    background-color: var(--warning);
    color: var(--white);
    font-size: var(--font-size-4);
}

.circle-error {
    background-color: var(--danger);
    color: var(--white);
    font-size: var(--font-size-4);
}

/* quartered-circle: circle for the center of radial-menu */

.quartered-circle {
    width: 100px;
    height: 100px;
}
    
.quarter {
    width: 50%;
    height: 50%;
}

.quarter-link {
    left: 50%;
    margin: -2em;
    top: 50%;
}

.quarter-icon {
    position: absolute;
    bottom: 1em;
    left: 1.5em;
}

/*
 * COLORS
 */

.primary-bg {
    background-color: var(--primary);
}

.secondary-bg {
    background-color: var(--secondary);
}

.success-bg {
    background-color: var(--success);
}

.info-bg {
    background-color: var(--info);
}

.warning-bg {
    background-color: var(--warning);
}

.danger-bg {
    background-color: var(--danger);
}

.light-bg {
    background-color: var(--light);
}

.primary-border {
    border-color: var(--primary);
}

.success-border {
    border-color: var(--success);
}

.info-border {
    border-color: var(--info);
}

.warning-border {
    border-color: var(--warning);
}

.danger-border {
    border-color: var(--danger);
}

.dark-gray-border {
    border-color: var(--dark-gray);
}

/*
 * GRIDS
 */

.grid {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr;
    grid-template-rows: 2fr 1fr 2fr;
    height: 80vh;
}

.flex-grid {
    display: flex;
    align-content: space-between;
    align-items: baseline;
    justify-content: center;
}

.two-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    align-items: center;
    justify-content: center;
    justify-items: center;
    margin-right: 2rem;
    margin-left: 2rem;
    padding-top: 1.5rem;
    padding-bottom: 1rem;
}

.three-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    grid-gap: 10px;
    align-items: center;
    justify-content: center;
}

.stack {
    display: grid;
    align-items: flex-end;
    justify-items: center;
    justify-content: center;
}

.three-grid-icon-1 {
    align-self: center;
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    margin-bottom: 10px;
    max-width: 55%;
    text-align: center;
}

.three-grid-icon-2 {
    align-self: center;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    margin-bottom: 10px;
    max-width: 55%;
    text-align: center;
}

.three-grid-icon-3 {
    align-self: center;
    grid-column: 3;
    grid-row: 1;
    justify-self: center;
    margin-bottom: 10px;
    max-width: 55%;
    text-align: center;
}

.three-grid-label-1 {
    align-self: center;
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    text-align: center;
}

.three-grid-label-2 {
    align-self: center;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    text-align: center;
}

.three-grid-label-3 {
    align-self: center;
    grid-column: 3;
    grid-row: 1;
    justify-self: center;
    text-align: center;
}

.grid-column-1 {
    grid-column: 1;
}

.grid-column-2 {
    grid-column: 2;
    justify-self: left;
}

.grid-column-3 {
    grid-column: 3;
}

/*
 * HTML
 */

/* Push bottom nav bar to bottom of screen on larger displays */
@media only screen and (min-width: 600px) {
    html {
        height: 100%;
    }
}

/*
 * FLASH MESSAGE
 */

.flash-message {
    display: block;
    font-family: var(--sans-serif);
    font-size: var(--font-size-7);
    margin-bottom: 0px;
    padding-top: 10px;
    padding-bottom: 0px;
    padding-left: 5px;
    padding-right: 5px;
}

/*
 * FONTS
 */

.font-near-black {
    color: var(--near-black);
}

.font-gray {
    color: var(--mid-gray);
}

.font-light-gray {
    color: var(--silver);
}

.font-success {
    color: var(--success);
}

.font-warning {
    color: var(--warning);
}

.font-failure {
    color: var(--danger);
}

/*
 * ICONS
 */

.icon {
    width: 3rem;
}

.icon-small {
    width: 1rem;
}

.icon-medium {
    width: 2rem;
}

.icon-large {
    width: 3rem;
}

.icon-100 {
    width: 100%;
}

/* icon-active: sets color of icon svg to near-black */
.icon-active {
    filter: invert(0%) sepia(1%) saturate(4171%) hue-rotate(79deg) brightness(86%) contrast(87%);
}

/* icon-inactive: sets color of icon svg to gray */
.icon-inactive {
    filter: invert(72%) sepia(8%) saturate(14%) hue-rotate(316deg) brightness(93%) contrast(92%);
}

/*
 * INPUTS
 */

.input {
    /* Needed to render inputs & buttons of equal width */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    padding-left: 5px;
    line-height: 1.5rem;
    width: 80%;
}

.alert-input {
    /* Needed to render inputs & buttons of equal width */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-right: 0.25rem;
    padding-right: 0.25rem;
    text-align: right;
    width: 7rem;
}

/*
 * LABELS
 */

.label-small {
    font-family: var(--sans-serif);
    font-size: var(--font-size-7);
    display: block;
}

.label-medium {
    font-size: var(--font-size-3);
    display: block;
}

.label-large {
    font-size: var(--font-size-2);
    display: block;
}

/*
 * LINKS
 */

.link {
    text-decoration: none;
    color: var(--font-near-black);
}

/*
 * LISTS
 */

.list {
    padding-left: 0;
    margin-left: 0;
    max-width: var(--max-width-6);
    border: 1px solid var(--light-silver);
    border-radius: var(--border-radius-2);
    list-style-type: none;
    font-family: var(--sans-serif);
}

.list-container {
    width: var(--max-width-5);
}

.list-icon {
    align-self: center;
    justify-self: right;
    grid-column: 2;
    grid-row: 1/3;
}

.list-item {
    display: grid;
    padding: 1rem;
    border-bottom-color: var(--light-silver);
    border-bottom-style: solid;
    border-bottom-width: 1px;
}

.list-text {
    justify-self: left;
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    font-size: var(--font-size-5);
}

.list-label {
    justify-self: left;
    grid-column: 1;
    grid-row: 2;
}

/*
 * METERS
 */

meter {
    border: 1px solid #ccc;
    border-radius: 3px;
    display: block;
    /* height: 1rem; */
    margin: 0 auto;
    margin-bottom: 1rem;
    width: 100%;
    /* remove default styling */
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;

    /* Firefox */
    background: none; /* remove default background */
    background-color: var(--near-white);
    box-shadow: 0 5px 5px -5px #333 inset;
}

meter::-webkit-meter-bar {
    background: none; /* remove default background */
    background-color: var(--near-white);
    box-shadow: 0 5px 5px -5px #333 inset;
}

meter::-webkit-meter-optimum-value {
    background-size: 100% 100%;
    box-shadow: 0 5px 5px -5px #999 inset;
    transition: width .5s;
}

/* Firefox styling */
meter::-moz-meter-bar {
    background: var(--mid-gray);
    background-size: 100% 100%;
    box-shadow: 0 5px 5px -5px #999 inset;
}

.meter-gauge {
    background-color: var(--near-white);
    border: 1px solid #ccc;
    border-radius: 3px;
    box-shadow: 0 5px 5px -5px #333 inset;
    display: block;
}

/* Chrome styling */
.meter-gauge > span {
    background: var(--mid-gray);
    background-size: 100% 100%;
    box-shadow: 0 5px 5px -5px #999 inset;
    display: block;
    height: inherit;
    text-indent: -9999px;
}

/*
 * NAVIGATION
 */

.nav-bar {
    background-color: var(--moon-gray);
    display: flex;
    align-items: center;
    width: 100%;
    height: 2em;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    justify-content: space-between;
}

.nav-title {
    font-family: var(--sans-serif);
    font-size: var(--font-size-4);
    font-weight: normal;
    margin: 0;
}

.nav-icon {
    width: auto;
    height: 90%;
    cursor: pointer;
}

.nav-icon-left {
    float: left;
    padding-left: 10px;
}

.nav-icon-right {
    float: right;
    padding-right: 10px;
}

.nav-item {
    display: inline-block;
    list-style-type: none;
}

/*
 * SWITCHES / SLIDERS
 */

/* switch: the box around the slider */
.switch {
    display: inline-block;
    height: 34px;
    position: relative;
    width: 60px;
}

/* hide default HTML checkbox */
.switch input {
    height: 0;
    opacity: 0;
    width: 0;
}

.switch-icon-left {
    align-self: center;
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
}

.switch-icon-right {
    align-self: center;
    grid-column: 3;
    grid-row: 1;
    justify-self: center;
}

.slider {
    background-color: var(--moon-gray);
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
    -webkit-transition: .4s;
}

.slider:before {
    background-color: var(--white);
    bottom: 4px;
    content: "";
    height: 26px;
    left: 4px;
    position: absolute;
    transition: .4s;
    -webkit-transition: .4s;
    width: 26px;
}

input:checked + .slider {
    background-color: var(--near-black);
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--near-black);
}

input:checked + .slider:before {
    -ms-transform: translateX(26px);
    transform: translateX(26px);
    -webkit-transform: translateX(26px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/*
 * TITLES
 */

.title-medium {
    font-size: var(--font-size-4);
    font-family: var(--sans-serif);
    max-width: var(--max-width-6);
}

/*
 * PARAGRAPHS
 */

p {
    font-family: var(--sans-serif);
    overflow-wrap: anywhere;
}