/** Queer Garden CSS
 * CSS fixes for Mastodon’s UI.
 */

/* Trans flag triangle */
body {
    /* prettier-ignore */
    --trans:
        powderblue 1em,
        pink 1em 2em,
        white 2em 3em,
        pink 3em 4em,
        powderblue 4em 5em,
        transparent 5em;
    background-image: linear-gradient(-0.375turn, var(--trans));
}

/** Mastodon v4.6.0
 * Fixes for website boy’s shit
 */

/* Compose form
 * Buttons outside the textfield.
 */
.compose-form__highlightable:has(textarea:focus) {
    /* Remove the outline on the entire “form” */
    outline: none;
}

.compose-form__highlightable {
    /* Remove styles that make this look like a form. */
    border: none;
    outline: none;
    background: transparent;
}

.compose-form__input {
    /* Add the form field styles here. */
    border: 1px solid var(--color-border-primary);
    border-radius: 4px 4px 0 0;
    background: var(--color-bg-primary);
    
    &:has(:focus-visible) {
        /* Add the outline style here to make it clear where focus is. */
        outline: 2px solid var(--color-border-brand);
        outline-offset: -2px;
    }
}

.compose-form__footer {
    padding: 0;
}

.compose-form__actions {
    /* Re-orientate the flex. */
    flex-direction: column;
    align-items: unset;
}

.compose-form__buttons {
    /* Make the button row look like a toolbar. */
    padding: 10px;
    padding-left: 72px; /* Reserve space for drop down buttons. */
    border: 1px solid var(--color-border-primary);
    border-top: 0;
    border-radius: 0 0 4px 4px;
    background: var(--color-bg-secondary);
}

.compose-form__submit {
    /* Align post button to the end. */
    align-self: end;
    
    /* Post -> Croak! */
    .button {
        padding: 8px 16px;
        font-size: 0;
        line-height: 1;
    }
    
    .button::after {
        content: " Croak!";
        font-size: 14px;
    }
}

.compose-form__dropdowns {
    /* Place the dropdown buttons on the toolbar. 
     * This is annoying for the taborder. Might want to adjust.
     */
    position: absolute;
    left: 10px;
    bottom: 55px; /* 32 (post button) + 12 (gap) + 1 (border) + 10 (padding) */
    margin: 0;
    
    .dropdown-button {
        border: none;
        padding: 2px;
    }
    
    .dropdown-button__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    
    .icon {
        --size: 20px;
        
        width: var(--size);
        height: var(--size);
    }
}

.compose-form__poll {
    /* Make the poll fit with the compose form. */
    border: 1px solid var(--color-border-primary);
    padding: 10px 0;
    border-top: 0;
    margin-top: 0;
    background: var(--color-bg-primary);
}

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

.upload-progress,
.compose-form__uploads {
    margin: 0;
    padding: 10px;
    border: 1px solid var(--color-border-primary);
    border-top: 0;
    border-radius: 0;
}

/* Content Warning button
 * Replaces the warning icon with the text “CW”
 */
.compose-form__buttons button[aria-label$="content warning"] svg {
    display: none;
}

.compose-form__buttons button[aria-label$="content warning"]::before {
    display: flex;
    content: "CW";
    min-width: 20px;
    min-height: 20px;
    align-items: center;
    justify-content: center;
}

/* Content Warning borders
 * Removes the weird construction border things.
 */
.compose-form .spoiler-input__border {
    display: none;
}

.compose-form .spoiler-input {
    /* Fix spacing and focus style */
    margin-bottom: 12px;
    border: 1px solid var(--color-border-primary);
    border-radius: 4px;
    
    &:has(:focus-visible) {
        /* Add the outline style here to make it clear where focus is. */
        outline: 2px solid var(--color-border-brand);
        outline-offset: -2px;
    }
}

.compose-form .spoiler-input .autosuggest-input {
    padding: 0;
    border: 0;
    outline: none;
}

.compose-form .spoiler-input__input {
    padding: 12px;
    color: var(--color-text-primary);
    background: transparent;
}

/* Timeline
 * Adds a different colour to mentions and replies.
 *
 * Note: 4.6.0 added different background for direct messages by default.
 *       This respects that with the `:not` declaration below.
 */
.notification-ungrouped--mention:not(.notification-ungrouped--direct) {
    background: var(--color-bg-secondary);
}

/* Reply Box
 * Removes the length cap on the content you’re replying to.
 */
.reply-indicator__content {
    display: unset;
    overflow: unset;
    max-height: unset;
}

/* Edit Box
 * Removes the “old content” preview.
 * Also styles it nicely with the compose form.
 */
.edit-indicator__content,
.edit-indicator__attachments {
    display: none;
}

.edit-indicator {
    border: 1px solid var(--color-border-primary);
    border-bottom: none;
}
 
.edit-indicator ~ .compose-form__input {
    border-radius: 0;
}

/* Link Underlines
 * Underline all links that are not user handles.
 */
.status__content a:not(.mention),
.link-button,
.status__prepend a {
    text-decoration: underline;
}

/* Column Background
 * By default the columns don’t have a background set.
 * This can lead to weird things with custom backgrounds.
 */
.column-header,
.item-list {
    background: var(--color-bg-primary);
}

/* Profile Connection Stats
 * Hides the followers and following stats on the profile page.
 * This is by no means fool proof as this can’t edit the DOM.
 * AT users will most likely still get this content.
 */
html ._comp_number_fields__list a {
    font-size: 0;
    
    &::after {
        content: "--";
        font-size: 15px;
    }
}

/* Profile Badge Domain
 * Hides the profile badge domain.
 * Not sure what this is supposed to do/prevent?
 */
html ._comp_badge__domain {
    display: none;
}

/* Profile Custom Fields
 * Undo the weird grid fuckery they introduced.
 */
html dl._comp_account_header__fieldList {
    display: flex;
    flex-direction: column;
}
 
html div._comp_mini_card__card {
    display: block;
    border: none;
    background: var(--color-bg-secondary);
}

html ._comp_mini_card__label,
html ._comp_mini_card__value {
    color: var(--color-text-primary);
    white-space: normal;
    overflow: unset;
    text-overflow: unset;
}

html dt._comp_mini_card__label {
    font-weight: 700;
}

html dd._comp_mini_card__value {
    font-weight: 400;
}

/* Custom Fields
 * Align the custom fields in a two column layout.
 */
/* html ._comp_account_header__fieldList {
    display: grid;
    gap: 8px;
    column-gap: 16px;
    grid-template-columns: max-content 1fr;
}

html ._comp_mini_card__card _comp_account_header__fieldItem {
    display: contents;
} */

/* Links
 * Underline links in statuses
 */
a.status-link:not(.mention) {
    text-decoration: underline;
}

/* Emoji
 * Increase the size of emoji in statuses
 */
.status__content .emojione {
    width: 32px;
    height: 32px;
    margin: 0px 0px 0;
}

/* Status content
 * Increase the content line height to something a bit more comfortable.
 */
.status__content p {
    line-height: 1.5;
}