styles.css

.setting-error {
    color: var(--text-error);
}

.text-accent {
    color: var(--text-accent)
}

.link {
    color: var(--link-color);
    text-decoration: var(--link-decoration);
    text-decoration-thickness: var(--link-decoration-thickness);
    font-weight: var(--link-weight);
}

.link:hover {
    color: var(--link-color-hover);
    text-decoration: var(--link-decoration-hover);
    text-decoration-thickness: var(--link-decoration-thickness);
    font-weight: var(--link-weight);
    cursor: pointer;
}

.text-muted {
    color: var(--text-muted);
}

.text-faint {
    color: var(--text-faint);
}

/* #region notification */

/* .notification-text span {
    font-size: var(--h3-size);
    line-height: var(--h3-line-height);
    font-family: var(--h3-font);
    color: var(--h3-color);
    font-style: var(--h3-style);
} */

div.modal:has(>.notification-buttons) {
    padding: var(--size-4-5) var(--size-4-3);
    width: var(--modal-community-sidebar-width);
    max-width: var(--modal-max-width-narrow);
}

div.notification-buttons {
    display: flex;
    width: 100%;
    margin-bottom: var(--size-2-3);
}

div.notification-buttons button,
div.notification-buttons select {
    flex-grow: 1;
    vertical-align: middle;
    text-overflow: ellipsis;
}

div.notification-buttons button {
    margin-right: var(--size-2-3);
}


button.notification-select-button {
    background-color: var(--interactive-accent);
    color: var(--text-on-accent);
    vertical-align: middle;
    text-overflow: ellipsis;
    margin-bottom: var(--size-4-2);
}

/* div.notification-buttons select option {
    padding: var(--size-2-2);
} */

/* div.notification-buttons button svg {
    vertical-align: middle;
} */

/* #endregion */

/* .svg {
    align-content: baseline;
} */

.note-preview-container {
    padding-bottom: var(--size-4-1);
    /* background-color: black; */
}

.note-preview:hover,
.rating-status-bar:hover,
.rating-show-settings-text:hover {
    cursor: pointer;
}

/* #region rating */

/* #region rating stroke */

img.rating-stroke {
    vertical-align: text-bottom;
    /* max-width: 1em; */
    height: 1em;
    object-fit: contain;
    margin: 0.1em;
}

span[id^='rating-']>svg {
    height: 1em;
    width: 1em;
}

.rating-stroke {
    font-size: 1em;
}

/* .rating-stroke>svg */

/* .rating span img.rating-stroke {
    vertical-align: bottom;
} */

/* #endregion */

/* #region rating settings */
.rating-show-settings-text {
    font-size: var(--font-ui-smaller);
    color: var(--text-faint);
    position: relative;
}

.rating-settings-svg svg {
    /* 
    display: inline-block;
    vertical-align: middle;
    align-content: center;
    height: 100%; */
    /* position: absolute; */
    vertical-align: center;
}

.rating-settings-svg {
    position: relative;
    width: var(--icon-size);
    height: var(--icon-size);
    /* align-content: center; */
    /* height: 100%; */
}

.rating-settings-svg>svg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

/* .rating-show-settings-text svg>path {
    text-align: center;
    vertical-align: middle;
} */

/* .rating-show-settings-text span {
    display: inline-block;
    vertical-align: middle;
} */

.rating-show-settings-text span {
    display: inline-block;
    vertical-align: middle;
}

/* #endregion */

/* #region status bar */

.rating-status-bar:hover {
    background-color: var(--interactive-hover);
}

.rating-status-bar:hover .text-accent {
    color: var(--text-accent-hover);
}

/* #endregion */

.rating>span {
    font-size: 2.5em;
}

.rating>span:hover {
    cursor: pointer;
}

.rating {
    text-align: center;
}

/* #endregion */

/* #region select view */

/* .bottom-modal-text.is-mobile,
.bottom-modal-text {
    margin-bottom: var(--size-4-4);
} */
div.modal:has(.select-view-button) {
    /* width: 50%; */
    width: var(--modal-community-sidebar-width);
    max-width: var(--modal-max-width-narrow);
}

.select-view-button {
    display: block;
    width: 100%;
    margin-bottom: var(--size-2-3);
}

/* #endregion */

/* #region new note stuff */
.new-note-div {
    width: 100%;
    display: flex;
    margin-bottom: var(--size-4-2);
}

div.modal:has(.new-note-div) {
    /* width: 50%; */
    width: var(--modal-community-sidebar-width);
    max-width: var(--modal-max-width-narrow);
    /* max-width: var(--modal-max-width); */
}

/* div.modal:has(.new-note-div).is-mobile */
div.modal:has(.new-note-div) {
    /* width: 50%; */
    padding: var(--size-4-5) var(--size-4-3);
    /* max-width: var(--modal-max-width); */
}

.new-note-label,
.new-note-input {
    font: var(--font-interface-theme);
    /* font-family: var(--font-interface); */
    /* font-size: var(--font-ui-small); */
}

.new-note-label {
    flex: 1;
    margin: auto var(--size-4-4) auto auto;
    text-align: right;
    /* padding-right: var(--size-4-3); */
    /* color: var(--text-normal); */

    color: var(--text-normal);
    font-size: var(--font-ui-medium);
    line-height: var(--line-height-tight);
    unicode-bidi: plaintext;
    /* font-family: var(--font-interface); */
}

/* #region new note input */
body:not(.is-mobile) .new-note-input,
body.is-mobile .new-note-input.dropdown {
    padding-inline-start: var(--size-4-6);
}

body.is-mobile .new-note-input:not(.dropdown) {
    padding-inline-start: calc(var(--size-4-6) / 2);
    padding-inline-end: calc(var(--size-4-6) / 2);
}

/* body.is-mobile .new-note-input.dropdown {
    text-align: center;
} */

body:not(.is-mobile) .new-note-input {
    flex: 2;
}

body.is-mobile .new-note-input {
    flex: 2.5;
    padding-inline-start: calc(var(--size-4-6) / 2);
    padding-inline-end: calc(var(--size-4-6) / 2);
}

.new-note-input {
    font-size: var(--font-ui-small);
    padding: var(--size-4-1) var(--size-4-2);
    font-variant-numeric: tabular-nums;
    -webkit-app-region: no-drag;
    background-color: var(--background-modifier-form-field);
    border: var(--input-border-width) solid var(--background-modifier-border);
    color: var(--text-normal);
    font-family: inherit;
    border-radius: var(--input-radius);
    outline: none;
    /* cursor: default;
    overflow: hidden; */
    position: relative;
    unicode-bidi: plaintext;
    box-sizing: border-box;
    /* box-sizing: border-box; */
    /* user-select: var(--text-selection); */
}

/* .new-note-input::before {} */

.new-note-input:hover {
    /* border-color: var(--background-modifier-border-hover); */
    border-color: var(--background-modifier-border-hover);
    transition: box-shadow 0.15s ease-in-out, border 0.15s ease-in-out;
}

.new-note-input:focus,
.new-note-input:focus-visible {
    /* border-color: var(--background-modifier-border-focus); */
    box-shadow: 0 0 0 2px var(--background-modifier-border-focus);
}

.new-note-input:focus,
.new-note-input:active {
    border-color: var(--background-modifier-border-focus);
    transition: box-shadow 0.15s ease-in-out, border 0.15s ease-in-out;
}

.new-note-input svg,
svg.new-note-input {
    width: var(--icon-size);
    stroke-width: var(--icon-stroke);
    color: var(--icon-color);
}

/* #endregion */

/* #endregion */


.calendar-container,
.on-this-day-container {
    width: 500px;
    max-width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    /* padding-left: min(50px, 5%);
    padding-right: min(50px, 5%); */
    /* background-color: var(--background-secondary); */
}


/* #region Calendar classes */

.cal-new-note-button {
    /* display: inline; */
    /* flex: 1; */
    margin-left: auto;
    aspect-ratio: 1/1;
    padding: 0;
    /* background-color: var(--interactive-accent);
    color: var(--text-on-accent); */
}

/* button.cal-new-note-button:hover {
    background-color: var(--interactive-accent-hover);

} */

div.cal-date-heading-container {
    display: flex;
    align-items: center;
}

/* #region calendar dots */
span.calendar-dot {
    padding: 0;
    letter-spacing: 0.1em;

}

div.dot-container {
    max-width: 50%;
    max-height: calc(100% + 1.1em);
    word-wrap: break-word;
    white-space: pre-wrap;
    padding-top: 0;
    padding-bottom: 0;
    /* margin-top: 0;
    margin-bottom: 0; */
    line-height: 0.5em;
    display: block;
    overflow-y: clip;
}

/* #endregion */

/* #region other calendar things */
.react-calendar {
    width: 350px;
    max-width: 100%;
    background: none;
    /* background-color: var(--background-primary); */
    /* border: 1px solid #a0a096; */
    font: var(--font-text-theme);
    /* font-family: var(--font-text); */
    line-height: 1.125em;
    margin-left: auto;
    margin-right: auto;

}

.react-calendar--doubleView {
    width: 700px;
}

.react-calendar--doubleView .react-calendar__viewContainer {
    display: flex;
    margin: -0.5em;
    white-space: nowrap;
}

.react-calendar--doubleView .react-calendar__viewContainer>* {
    width: 50%;
    margin: 0.5em;
}

.react-calendar,
.react-calendar *,
.react-calendar *:before,
.react-calendar *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.react-calendar button,
.calendar-custom-buttons button {
    /* margin: 0.1rem 0.2rem; */
    /* border: none; */
    border: calc(var(--size-2-1) / 1.5) solid var(--background-primary);
    border-radius: 0;
    box-shadow: none;
    /* width: calc(100% - 0.1rem); */
    /* width: 14.2857142857%; */
    /* width: 100%; */
    /* display: flex; */
    height: 2.5rem;
}

.react-calendar button.react-calendar__tile:first-child {
    border-top-left-radius: var(--radius-s);
}

.react-calendar button:last-child,
.react-calendar__decade-view button.react-calendar__tile:nth-last-of-type(2),
.react-calendar__century-view button.react-calendar__tile:nth-last-of-type(2) {
    border-bottom-right-radius: var(--radius-s);
}

.react-calendar__navigation button:first-child,
.react-calendar__month-view button.react-calendar__tile:nth-last-of-type(7),
.react-calendar__year-view button.react-calendar__tile:nth-last-of-type(3),
.react-calendar__decade-view button.react-calendar__tile:last-child,
.react-calendar__century-view button.react-calendar__tile:last-child {
    border-bottom-left-radius: var(--radius-s);
}

.react-calendar__month-view button.react-calendar__tile:nth-of-type(7),
.react-calendar__year-view button.react-calendar__tile:nth-of-type(3),
.react-calendar__decade-view button.react-calendar__tile:nth-of-type(3),
.react-calendar__century-view button.react-calendar__tile:nth-of-type(3) {
    border-top-right-radius: var(--radius-s);
}

.calendar-custom-buttons button {
    border-radius: var(--radius-s) var(--radius-s) 0 0;
}

.react-calendar button:enabled:hover,
.calendar-custom-buttons button:enabled:hover {
    cursor: pointer;
}

.react-calendar__navigation {
    display: flex;
    height: 44px;
    margin-bottom: 1em;
}

.react-calendar__navigation__label__labelText {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-custom-buttons {
    /* display: flex; */
    height: 40px;
    margin-left: auto;
    margin-right: auto;
    /* text-align: center; */
    position: relative;
    width: 350px;
    max-width: 100%;
}

.today-cal-button {
    position: absolute;
    left: 0;
}

.refresh-cal-button {
    position: absolute;
    right: 0;
}

/* .calendar-custom-buttons button {
    vertical-align: middle;
} */

.react-calendar__navigation button,
.calendar-custom-buttons button {
    min-width: 44px;
    background-color: var(--interactive-normal);
    /* margin: 0.05rem 0.1rem; */
}

.react-calendar__navigation button:disabled {
    background-color: var(--background-primary-alt);
    /* Test to make sure this is good */
}

.react-calendar__navigation button:enabled:hover,
.react-calendar__navigation button:enabled:focus,
.calendar-custom-buttons button:enabled:hover,
.calendar-custom-buttons button:enabled:focus {
    background-color: var(--interactive-hover);
}

/* .react-calendar__month-view--weekNumbers */
.react-calendar__month-view__weekdays {
    text-align: center;
    text-transform: uppercase;
    font: inherit;
    /* font-size: 0.75em; */
    font-size: var(--font-smallest);
    font-weight: var(--font-bold);
}

/* The weekday text */
.react-calendar__month-view__weekdays__weekday {
    padding: 0.5em;
    display: flex;
    justify-content: center;
    /* text-decoration: none; */
}

/* not sure whether this is working */
.react-calendar__month-view__weekNumbers .react-calendar__tile {
    /* .react-calendar__month-view--weekNumbers button.react-calendar__tile { */
    display: flex;
    /* width: 100%; */
    align-items: center;
    justify-content: center;
    font: inherit;
    /* font-size: 0.75em; */
    font-size: var(--font-smallest);
    font-weight: var(--font-bold);
}

/* .react-calendar__month-view__days button {
    display: flex;
} */
.react-calendar__month-view__days__day--weekend {
    color: var(--text-muted);
}

.react-calendar__month-view__days__day--neighboringMonth,
.react-calendar__decade-view__years__year--neighboringDecade,
.react-calendar__century-view__decades__decade--neighboringCentury {
    color: var(--text-faint);
}

.react-calendar__year-view .react-calendar__tile,
.react-calendar__decade-view .react-calendar__tile,
.react-calendar__century-view .react-calendar__tile {
    padding: 2em 0.5em;
}

button.react-calendar__tile,
.react-calendar__tile {
    max-width: 100%;
    padding: 10px 6.6667px;
    /* background: none; */
    background-color: var(--interactive-normal);
    text-align: center;
    line-height: 16px;
    font: inherit;
    /* font-size: 0.833em; */
    font-size: var(--font-smaller);
}

button.react-calendar__tile:disabled {
    background-color: var(--background-primary-alt);
    color: var(--text-faint);
}

.react-calendar__month-view__days__day--neighboringMonth:disabled,
.react-calendar__decade-view__years__year--neighboringDecade:disabled,
.react-calendar__century-view__decades__decade--neighboringCentury:disabled {
    color: var(--text-faint);
}

button.react-calendar__tile:enabled:hover,
button.react-calendar__tile:enabled:focus {
    background-color: var(--interactive-hover);
}

button.filled-date {
    /* background-color: hsl(var(--accent-h), max(calc(var(--accent-s) - 10%), 10%), min(calc(var(--accent-l) + 5%), 90%)); */
    /* background-color: hsl(var(--accent-h), max(calc(var(--accent-s) - 25%), 10%), max(calc(var(--accent-l) - 5%), 10%)); */
    background-color: hsl(var(--accent-h), var(--accent-s), max(var(--accent-l) - 6%, 10%));
    /* background-color: var(--interactive-accent); */
    color: var(--text-on-accent);
}

button.filled-date:enabled:hover,
button.filled-date:enabled:focus {
    background-color: var(--interactive-accent-hover);
    color: var(--text-on-accent);
}

button.filled-date>* {
    margin-left: auto;
    margin-right: auto;
}

/* Now is today */
button.react-calendar__tile--now,
.react-calendar__tile--now {
    /* background-color: var(--interactive-accent); */
    /* background-color: hsl(var(--accent-h), max(calc(var(--accent-s) - 10%), 10%), min(calc(var(--accent-l) + 5%), 90%)); */
    background-color: hsl(var(--accent-h), var(--accent-s), min(var(--accent-l) + 6%, 90%));
    /* background-color: black; */
    color: var(--text-on-accent);
}

button.react-calendar__tile--now:enabled:hover,
button.react-calendar__tile--now:enabled:focus {
    background-color: var(--interactive-accent-hover);
}

/* button.react-calendar__tile--hasActive {
    background-color: hsl(calc(var(--accent-h) + 120), var(--accent-s), max(var(--accent-l) - 5%, 10%));
        color: var(--text-on-accent);
} */
/* button.react-calendar__tile--hasActive,
button.react-calendar__tile--hasActive:enabled:hover,
button.react-calendar__tile--hasActive:enabled:focus {
    background-color: hsl(calc(var(--accent-h) + 120), var(--accent-s), max(var(--accent-l) - 5%, 10%));
        color: var(--text-on-accent);
    }
    
    */

/* Active is the one that's selected */
button.react-calendar__tile--hasActive,
button.react-calendar__tile--hasActive:enabled:hover,
button.react-calendar__tile--hasActive:enabled:focus,
button.react-calendar__tile--active,
button.react-calendar__tile--active:enabled:hover,
button.react-calendar__tile--active:enabled:focus {
    /* background-color: var(--interactive-accent); */
    background-color: hsl(calc(var(--accent-h) + 120), var(--accent-s), max(var(--accent-l) - 5%, 10%));
    color: var(--text-on-accent);
}




/* button.react-calendar__tile--active:enabled:hover,
button.react-calendar__tile--active:enabled:focus {
    background-color: hsl(calc(var(--accent-h) + 120), var(--accent-s), min(var(--accent-l) + 5%, 90%));
        color: var(--text-on-accent-inverted);
    } */

.react-calendar--selectRange button.react-calendar__tile--hover {
    background-color: var(--interactive-hover);
}

.calendar-attachment {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: brightness(80%) contrast(95%);
}

button.filled-date:has(img) {
    position: relative;
}

button.filled-date:has(img) :not(img) {
    z-index: 1;
    --white: white;
    --black: black;
    color: var(--white);
    text-shadow: 0px 0px var(--size-2-2) var(--black), 0px 0px var(--size-2-2) var(--black),
        0px 0px var(--size-2-2) var(--black);
}

button.filled-date:enabled:hover:has(img) :not(img),
button.filled-date:enabled:focus:has(img) :not(img),
button.react-calendar__tile--active:has(img) :not(img) {
    text-shadow: 0px 0px var(--size-2-2) var(--black), 0px 0px var(--size-2-2) var(--black),
        0px 0px var(--size-4-2) var(--black),
        0px 0px var(--size-4-2) var(--black);
}

button.filled-date:enabled:hover:has(img) .calendar-attachment,
button.filled-date:enabled:focus:has(img) .calendar-attachment,
button.react-calendar__tile--active:has(img) .calendar-attachment,
button.react-calendar__tile--active:enabled:hover:has(img) .calendar-attachment,
button.react-calendar__tile--active:enabled:focus:has(img) .calendar-attachment {
    filter: brightness(100%) contrast(100%);
}

button.filled-date:enabled:hover:has(img),
button.filled-date:enabled:focus:has(img) {
    border-color: var(--interactive-accent-hover);
}

button.react-calendar__tile--active:has(img),
button.react-calendar__tile--active:enabled:hover:has(img),
button.react-calendar__tile--active:enabled:focus:has(img) {
    border-color: hsl(calc(var(--accent-h) + 120), var(--accent-s), max(var(--accent-l) - 5%, 10%));
}

/* button.filled-date:enabled:hover:has(img),
button.filled-date:enabled:focus:has(img) {
    opacity: 0.35;
} */

/* #endregion */

/* #endregion */