/* #region Generic style */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Remove style from a list, assumedly a UL */
.list-unstyled {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

.button .material-icons {
    line-height: inherit !important;
}

/* Space between items in the navbar so that everything looks good on mobile */
.navbar-brand {
    justify-content: space-between;
}

/* Format the navbar logo standin */
.navbar-brand .title {
    font-family: 'Josefin Sans', sans-serif;
}

/* Add space after "Onelook" and before "for Planbook" */
.navbar-brand .title:after {
    white-space: pre;
    content: ' ';
}

/* Remove margin on logo */
.navbar-brand .title, .navbar-brand .subtitle {
    margin: 0 !important;
}

/* Don't squish the user image in top right */
.navbar-item img {
    max-height: 3rem;
}

/* Keep the navbar stuck to the top of the screen */
.sticky-top {
    z-index: 3;
    margin-top: 0;
    position: sticky;
    top: 0;
}

.column:first-child {
    margin-left: .25rem;
}

.column:last-child {
    margin-right: .25rem;
}

.notification-section {
    position: fixed;
    top: 0;
    z-index: 100;
    width: 100%;
    top: -100%;
}

.notification-animate {
    animation: notificationAnim 5s;
}

.is-4rem {
    font-size: 4rem;
}


@keyframes notificationAnim {
    0% {
        top: -100%;
    }
    15% {
        top: 0;
    }
    85% {
        top: 0;
    }
    100% {
        top: -100%;
    }
}

/* Pulse an element with a 64px shadow, which is relatively large*/
/* Currently used for onboarding; uses the is-active color from Bulma */
@keyframes generic-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(50, 115, 220, 0.75);
    }

    70% {
        box-shadow: 0 0 0 64px rgba(50, 115, 220, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(50, 115, 220, 0);
    }
}

/* #endregion */

/* #region Landing style */
.landing #landing-title #title {
    font-size: 4rem;
}

.hero.is-info .title {
    color: unset;
}

.landing #scroll-down-button {
    user-select: none;
    animation: scroll-button-bounce 5s ease 1.5s;
}

@keyframes scroll-button-bounce {
    0% {
        transform: translateY(0) scale(1.0);
    }

    25% {
        transform: translateY(1rem) scale(1.1);
    }

    75% {
        transform: translateY(0) scale(1.0);
    }

    100% {
        transform: translateY(0) scale(1.0);
    }
}

#classes-sample-container .class-box {
    animation: fly-in-rtl 1s ease forwards;
    opacity: 0;
}

#classes-sample-container .class-box:nth-child(1) {
    animation-delay: 0;
}

#classes-sample-container .class-box:nth-child(2) {
    animation-delay: 0.25s;
}

#classes-sample-container .class-box:nth-child(3) {
    animation-delay: 0.5s;
}

@keyframes fly-in-rtl {
    from {
        transform: translateX(25%);
        opacity: 0;
    }
    to {
        transform: none;
        opacity: 100%;
    }
}

.landing .footer {
    background-color: #333333;
    color: #f5f5f5;
}

.landing .footer a {
    color: #f5f5f5;
}
/* #endregion */

/* #region Main page style */

/* Override Bulma styling on columns so that is-one-fifth works without cutting off the right due to the scrollbar */
.weekview .columns {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.weekview .column:first-child {
    margin-left: 0 !important;
}

/* Round off the top corners of the class title, but keep the bottom corners straight so that everything meshes up properly */
.class-box .box-title, .event-box .box-title {
    color: #fff!important;
    width: 100%;
    border-radius: inherit;
}

/* Round off the bottom corners of empty event boxes */
.class-box .box-title, .event-box .box-title:not(.empty-event) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Tweak the margin on the class box title */
.box-title .subtitle {
    margin-top: -1.25rem;
}

/* There is likely a better way to do this, but this is a quick fix */
/* TODO: fix element specificity so that :not is not required here */
.box .is-divider:not(#login-divider) {
    margin-top: .75rem;
    margin-bottom: .75rem;
}

.event-box .box-title {
    background-color: #89043D;
}

/* Try to even out the columns between the week labels and the actual content */
.is-divider-vertical {
    padding-left: 0;
    padding-right: 0;
}

.class-box, .event-box {
    padding: 0;
}

/* Ensure the weekday labels aren't too tall */
.week-label-columns .column .notification {
    padding: 0.5rem;
}

/* Use white text for the titles of the class boxes */
.class-box .box-title p, .event-box .box-title p {
    color: #fff;
}

/* Pad the boxes */
.class-content-container, .class-box .box-title, .event-content-container, .event-box .box-title {
    padding: 16px;
}

.class-content-container {
    /* Hide overflow with a scrollbar */
    overflow: overlay;
}

/* Make the attachments and homework titles a little more compact */
.class-homework-title, .class-attachments-title {
    margin-bottom: 0.75rem !important;
}

.class-attachment-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

/* For empty lessons, it looks nicer to round the bottom left and bottom right corners */
/* !important is used to ensure the previous value is overriden */
/* Do the same for empty events */
.class-box .box-title.empty-lesson, .class-box .box-title.empty-event {
    border-bottom-left-radius: inherit !important;
    border-bottom-right-radius: inherit !important;
}


/* Ensure that lists are contained properly within boxes */
.class-content-container ol li {
    list-style-position: inside;
}

/* Have the info icon on the right side of events */
.event-info-icon {
    float: right;
}

.event-info-icon i {
    font-size: 30px;
}

/* Round out the user image parent container */
.user-image {
    border-radius: 100%;
}

/* Stylize the onboarding notification on the homepage */
.onboarding-home-notification {
    max-width: 512px;
    position: absolute;
    z-index: 50;
    left: 50%;
    top: 0;
    margin-top: 0;
    transform: translate(-25%, -100%);
    animation: onboarding-appear 0.75s forwards;
}

/* Make the onboarding notification "appear" */
@keyframes onboarding-appear {
    0% {
        margin-top: 0;
        transform: translate(-25%, -100%);
    }

    80% {
        margin-top: 12px;
        transform: translate(-25%, 5%);
    }

    100% {
        margin-top: 12px;
        transform: translate(-25%, 0);
    }
}

/* Center the arrow in the onboarding notification vertically */
.onboarding-home-notification > .columns > .column:not(.is-11) {
    /* Inherit flexbox */
    display: inherit;
    align-items: center;
}

/* Help onboard a first-time user by pulsing the user icon to indicate where the user is supposed to click */
/* Using the color from bulma is-active */
.weekview.onboarding .user-image {
    box-shadow: 0 0 0px 0px rgba(50, 115, 220, 1);
    animation: generic-pulse 2s infinite;
}

/* Stop pulsing when the user icon is hovered over, as it would be distracting to do so */
.weekview.onboarding .is-hoverable:hover .user-image {
    animation: none;
}

/* Also pulse a little dot on the "Manage Classes" option for onboarding */
.weekview.onboarding .dropdown-item.classes::after {
    content: '';
    position: absolute;
    border-radius: 100%;
    top: 50%;
    right: 12px;
    height: 12px;
    width: 12px;
    background-color: #3273dc;
    transform: translate(25%, -50%);
    box-shadow: 0 0 0px 0px rgba(50, 115, 220, 1);
    animation: dot-pulse 2s infinite;
}

/* Animate the onboarding dot */
/* Using the example from https://www.florin-pop.com/blog/2019/03/css-pulse-effect/ */
@keyframes dot-pulse {
    0% {
        transform: scale(0.95) translate(25%, -50%);
        box-shadow: 0 0 0 0 rgba(50, 115, 220, 0.75);
    }

    70% {
        transform: scale(1.0) translate(25%, -50%);
        box-shadow: 0 0 0 10px rgba(50, 115, 220, 0);
    }

    100% {
        transform: scale(0.95) translate(25%, -50%);
        box-shadow: 0 0 0 0 rgba(50, 115, 220, 0);
    }
}

/* #endregion */

/* #region Account page style */

/* Keep the settings panel from going down the page as it is scrolled */
.menu-col .tile {
    position: sticky;
    top: 64px;
}

/* Prevent scrolling items from being covered by the navbar */
.my-account-col .tile {
    scroll-margin-top: 64px;
}

.save-button-container {
    overflow: hidden;
    position: absolute;
    right: 12px;
    bottom: 12px;
}

.spaced-buttons {
    justify-content: space-between;
}

.centered-title {
    display: flex;
    justify-content: center;
}

/* Pulse the "Add Class" button when onboarding */
.onboarding .add-class-button {
    animation: generic-pulse 2s infinite;
}

/* #endregion */

/* #region Add account dialog style */

.add-class-modal .modal-card-body {
    overflow-x: hidden;
}

.class-form-container {
    width: 200%;
}

.class-form-container form {
    width: 50%;
}

.class-form-container .preliminary-class-info {
    float: left;
    padding-right: inherit;
}

.class-form-container .granular-class-info {
    float: right;
    padding-left: inherit;
}

.preliminary-class-info, .granular-class-info {
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    position: relative;
    left: 0;
    top: 0;
}

.cycle-day-field {
    display: none;
}

.custom-class-control {
    display: flex;
    align-items: center;
}

.custom-class-control #custom-class-name {
    margin-left: 12px;
}

.color-field .buttons .button {
    color: white;
}

.color-field .buttons .button.is-selected {
    box-shadow: 0 0 4px 1px #00000060;
    border-color: transparent;
}

.color-field .buttons .button.is-selected .icon:after {
    content: 'check';
}

.class-anim-leave {
    animation-name: slideOutLeft;
}

.class-anim-enter {
    animation-name: slideInRight;
}

@keyframes slideOutLeft {
    from {
        left: 0;
    }
    to {
        left: -50%;
    }
}

@keyframes slideInRight {
    from {
        left: 0;
        padding-left: inherit;
        padding-right: 0;
    }
    to {
        left: -50%;
        padding-left: 0;
        padding-right: inherit;
    }
}

/* #endregion */

/* #region Login page style */
#google-login {
    font-family: 'Roboto', sans-serif;
}

#google-login .icon {
    padding: 2px;
}
/* #endregion */

/* #region Verification required page style */
#verification-required .sk-three-bounce.hidden {
    opacity: 0;
}
/* #endregion */

/* #region Bulma 0.9 polyfills */
/* TODO: Remove this after upgrading to Bulma 0.9, which includes new helpers */
.is-flex-grow-0	{
    flex-grow: 0
}

.is-flex-grow-1	{
    flex-grow: 1
}

.is-flex-grow-2	{
    flex-grow: 2
}

.is-flex-grow-3	{
    flex-grow: 3
}

.is-flex-grow-4	{
    flex-grow: 4
}

.is-flex-grow-5	{
    flex-grow: 5
}

.mb-4 {
    margin-bottom: 1rem;
}
/* #endregion */