@import "vars";

/* override styles for when the div is collapsed */
div.reminderContent.is-collapsed .column.discord-frame {
    display: none;
}

div.reminderContent.is-collapsed .column.settings {
    display: none;
}

div.reminderContent.is-collapsed .reminder-settings {
    margin-bottom: 0;
}

div.reminderContent.is-collapsed .button-row {
    display: none;
}

div.reminderContent.is-collapsed .button-row-edit {
    display: none;
}

div.reminderContent.is-collapsed .reminder-topbar {
    padding-bottom: 0;
}

div.reminderContent.is-collapsed .invert-collapses {
    display: inline-flex;
}

div.reminderContent .invert-collapses {
    display: none;
}

div.reminderContent.is-collapsed input[name="name"] {
    display: inline-flex;
    flex-grow: 1;
    border: none;
    background: none;
    box-shadow: none;
    opacity: 1;
}

div.reminderContent.is-collapsed .hide-box {
    display: inline-flex;
}

div.reminderContent.is-collapsed .hide-box i {
    transform: rotate(90deg);
}

#app {
    > .scheme-dark {
        background-color: $primary-background-dark;
        color: $primary-text-dark;

        .dashboard-sidebar {
            background-color: $contrast-background-dark;
            color: $contrast-text-dark;
        }

        .reminderContent {
            background-color: $secondary-background-dark;
        }

        label, strong, p, .subtitle, .title {
            color: $primary-text-dark;
        }
    }

    > .scheme-light {
        background-color: $primary-background-light;
        color: $primary-text-light;

        .dashboard-sidebar {
            background-color: $contrast-background-light;
            color: $contrast-text-light;
        }

        .reminderContent {
            background-color: $secondary-background-light;
        }

        label, strong, p, .subtitle, .title {
            color: $primary-text-light;
        }
    }
}