/* CONTENT-CORE */

/* VARIABLES */
:root {
    --padding-default: 20px;
    --margin-default: 40px;
    --margin-large: 80px;
    --margin-small: 20px;
    --corner-radius: 5px;

    /* Other colors in /vue/css/calendar.css */
    --col-white:   #fff;
    --col-light:   #eee;
    --col-dark:    #333;
    --col-black:   #000;

    --col-primary: #999; /* ? */
    --col-secondary: #666; /* ? */
    --col-event1: #666;
    --col-event2: #999;
    
    --col-blue:    #0d6efd;
    --col-indigo:  #6610f2;
    --col-purple:  #6f42c1;
    --col-pink:    #d63384;
    --col-red:     #dc3545;
    --col-orange:  #fd7e14;
    --col-yellow:  #ffc107;
    --col-green:   #198754;
    --col-teal:    #20c997;
    --col-cyan:    #0dcaf0;

    /* Icon defaults inspired by calendar-icon config */
    --icon-tiny: 12px;
    --icon-default: 16px;
    --icon-medium: 24px; /* Suitable for H3 headings? */
    --icon-large: 40px;
  
}


/* ASPECT RATIOS */
.aspect-* {
    width: 100%;
    min-height: min-content;
}
.aspect-square { aspect-ratio: 1/1; }
.aspect-photo { aspect-ratio: 3/2; }
.aspect-film { aspect-ratio: 16/9; }
.aspect-tv { aspect-ratio: 4/3; }
.aspect-portrait { aspect-ratio: 2/3; }
.aspect-1-1 { aspect-ratio: 1/1; }
.aspect-2-1 { aspect-ratio: 2/1; }
.aspect-3-1 { aspect-ratio: 3/1; }
.aspect-4-1 { aspect-ratio: 4/1; }
.aspect-6-1 { aspect-ratio: 6/1; }
.aspect-8-1 { aspect-ratio: 8/1; }
.aspect-10-1 { aspect-ratio: 10/1; }
.aspect-12-1 { aspect-ratio: 12/1; }
.aspect-page { height: 100vh; }

.aspect-1-2 { aspect-ratio: 1/2; }
.aspect-1-3 { aspect-ratio: 1/3; }
.aspect-1-4 { aspect-ratio: 1/4; }
.aspect-1-6 { aspect-ratio: 1/6; }
.aspect-1-8 { aspect-ratio: 1/8; }
.aspect-1-10 { aspect-ratio: 1/10; }
.aspect-1-12 { aspect-ratio: 1/12; }


/* BACKGROUNDS, GRADIENTS, TRANSPARENCIES */
*[class*='bg-grad-'], 
*[class*='bg-col-'] { 
    position: relative; 
    z-index: 1;
}
*[class*='bg-grad-']:before,
*[class*='bg-col-']:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.bg-col-white:before { background-color: var(--col-white); }
.bg-col-light:before { background-color: var(--col-light); }
.bg-col-black:before { background-color: var(--col-black); }
.bg-col-dark:before { background-color: var(--col-dark); }

.bg-col-primary:before { background-color: var(--col-primary); }
.bg-col-secondary:before { background-color: var(--col-secondary); }
.bg-col-event1:before { background-color: var(--col-event1); }
.bg-col-event2:before { background-color: var(--col-event2); }

.bg-col-track0:before { background-color: var(--col-track0); }
.bg-col-track1:before { background-color: var(--col-track1); }
.bg-col-track2:before { background-color: var(--col-track2); }
.bg-col-track3:before { background-color: var(--col-track3); }
.bg-col-track4:before { background-color: var(--col-track4); }
.bg-col-track5:before { background-color: var(--col-track5); }
.bg-col-track6:before { background-color: var(--col-track6); }
.bg-col-track7:before { background-color: var(--col-track7); }
.bg-col-track-hidden:before { background-color: var(--col-track-hidden); }

.bg-col-meeting-confirmed:before { background-color: var(--col-meeting-confirmed); }
.bg-col-meeting-inbound:before { background-color: var(--col-meeting-inbound); }
.bg-col-meeting-outbound:before { background-color: var(--col-meeting-outbound); }
.bg-col-meeting-deleted:before { background-color: var(--col-meeting-deleted); }

.bg-col-blue:before { background-color: var(--col-blue); }
.bg-col-indigo:before { background-color: var(--col-indigo); }
.bg-col-purple:before { background-color: var(--col-purple); }
.bg-col-pink:before { background-color: var(--col-pink); }
.bg-col-red:before { background-color: var(--col-red); }
.bg-col-orange:before { background-color: var(--col-orange); }
.bg-col-yellow:before { background-color: var(--col-yellow); }
.bg-col-green:before { background-color: var(--col-green); }
.bg-col-teal:before { background-color: var(--col-teal); }
.bg-col-cyan:before { background-color: var(--col-cyan); }

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

.bg-trans-10:before { opacity: 0.1; }
.bg-trans-20:before { opacity: 0.2; }
.bg-trans-30:before { opacity: 0.3; }
.bg-trans-40:before { opacity: 0.4; }
.bg-trans-50:before { opacity: 0.5; }
.bg-trans-60:before { opacity: 0.6; }
.bg-trans-70:before { opacity: 0.7; }
.bg-trans-80:before { opacity: 0.8; }
.bg-trans-90:before { opacity: 0.9; }
.bg-trans-100:before { opacity: 1; }

.bg-opacity-10:before { opacity: 0.1; }
.bg-opacity-20:before { opacity: 0.2; }
.bg-opacity-30:before { opacity: 0.3; }
.bg-opacity-40:before { opacity: 0.4; }
.bg-opacity-50:before { opacity: 0.5; }
.bg-opacity-60:before { opacity: 0.6; }
.bg-opacity-70:before { opacity: 0.7; }
.bg-opacity-80:before { opacity: 0.8; }
.bg-opacity-90:before { opacity: 0.9; }
.bg-opacity-100:before { opacity: 1; }

.bg-grad-light { background: linear-gradient(135deg, var(--col-white) 0%, var(--col-light) 45%); }
.bg-grad-dark { background: linear-gradient(135deg, var(--col-dark) 0%, var(--col-black) 45%); }


/* ICONS */
/* Explicit sizing */
.icon-default {
    max-height: var(--icon-default);
    max-width: var(--icon-default);
    min-height: var(--icon-default);
    min-width: var(--icon-default);
    height: var(--icon-default);
    width: var(--icon-default);
  }
.icon-tiny {
    max-height: var(--icon-tiny);
    max-width: var(--icon-tiny);
    min-height: var(--icon-tiny);
    min-width: var(--icon-tiny);
    height: var(--icon-tiny);
    width: var(--icon-tiny);
}
.icon-medium {
    max-height: var(--icon-medium);
    max-width: var(--icon-medium);
    min-height: var(--icon-medium);
    min-width: var(--icon-mediumy);
    height: var(--icon-medium);
    width: var(--icon-medium);
}
.icon-large {
    max-height: var(--icon-large);
    max-width: var(--icon-large);
    min-height: var(--icon-large);
    min-width: var(--icon-large);
    height: var(--icon-large);
    width: var(--icon-large);
}


/* ROUNDED CORNERS */
.rounded {
    border-radius: var(--corner-radius);
    overflow: hidden; /* Hide .bg-col-* pseudoelement overspill */
}


/* UTILITIES */
.mode-dark, .on-dark { color: #eee; }

/* Margin classes */
.margin-bottom-0 { margin-bottom: 0; }
.margin-bottom-default { margin-bottom: var(--margin-default); }
.margin-bottom-large { margin-bottom: var(--margin-large); }
.margin-bottom-small { margin-bottom: var(--margin-small); }


/* .hack-* rules are only enabled for portrait and wider */
@media (min-width: 768px) {
    /* Force the width of an element, relative to the container space */
    .hack-width-10 { width: 10% !important; }
    .hack-width-20 { width: 20% !important; }
    .hack-width-30 { width: 30% !important; }
    .hack-width-40 { width: 40% !important; }
    .hack-width-50 { width: 50% !important; }
    .hack-width-60 { width: 60% !important; }
    .hack-width-70 { width: 70% !important; }
    .hack-width-80 { width: 80% !important; }
    .hack-width-90 { width: 90% !important; }
    .hack-width-100 { width: 100% !important; }

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