@import "colors";
@import "columns";
@import "scrollbars";
@import "sizes";

@import "multiple-columns";

@import "components/drawer";
@import "components/search";
@import "components/column";
@import "components/notification-filter-bar";
@import "components/status/status";

@import "modules/feed";
@import "modules/status";

@font-face {
    font-family: "Manrope";
    src: url("Manrope[wght].woff2") format("woff2-variations");
}

* {
    box-sizing: border-box;

    &::before,
    &::after {
        box-sizing: inherit;
    }
}

body {
    margin: 0;
    font-family: "Manrope", ui-rounded, sans-serif;
    color: var(--color-fg);
    line-height: 1.5;
    text-rendering: optimizelegibility;
    background: var(--color-bg);
}

.ui {
    width: 100%;
    height: 100%;
}

button {
    display: block;
    padding: 6px;
    border: 1px solid transparent;
    color: var(--color-content-fg);
    font: inherit;
    line-height: inherit;
    border-radius: 6px;
    background-color: var(--color-content-secondary-bg);

    &:is(:active, :focus, :hover) {
        color: var(--color-accent);
        background-color: var(--color-accent-bg);
    }

    &:focus-visible {
        outline: solid 2px var(--color-accent-focus);
        outline-offset: 2px;
    }
}

button:has(svg) {
    display: flex;
    align-items: center;
}

img {
    max-width: 100px;
}

svg.gts-icon {
    display: block;
    width: var(--size-icon);
    height: var(--size-icon);
}

.compose-form__buttons {
    display: flex;
    gap: 5px;
}

.emojione {
    --size: min(1em, 20px);

    width: var(--size);
    height: var(--size);
}

.ui__header,
.search__popout,
.drawer__inner__mastodon {
    display: none;
}

.upload-area {
    position: fixed;
}