index.scss

@use "./ui.scss";
@use "./values/colors.scss";
@use "./values/spacing.scss";

html,
body {
    background-color: colors.$blue-dark;
}

#icons {
    display: grid;
    width: calc(4 * 24px + 3 * spacing.$small);
    grid-template-columns: repeat(4, 1fr);
    gap: spacing.$small;
    color: colors.$light;
}

#buttons {
    display: flex;
    gap: spacing.$small;
    align-items: center;
}

#badges {
    display: flex;
    gap: spacing.$small;
}

form {
    display: flex;
    width: 100%;
    max-width: 300px;
    flex-direction: column;
    gap: spacing.$small;
    button {
        align-self: flex-end
    }
}

#loader {
    height: 24px;
    width: 24px;
}

#popover {
    width: 100%;
    max-width: 500px;
    display: grid;
    gap: spacing.$medium;
    grid-template-columns: repeat(3, 1fr)
}

#list {
    padding: spacing.$medium 0;
    display: flex;
    flex-direction: column;
    gap: spacing.$small;
    max-width: 400px;
}