button {
    appearance: button;
    -webkit-appearance: button;
    border: none;
    outline: none;
    background: none;
    transition: box-shadow 300ms, background 300ms;
    box-sizing: content-box;
    overflow: clip;
    position: relative;
    margin: 0;
    padding: 0 10px;
    user-select: none;
    height: 40px;
    max-height: 40px !important;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

button[filled] {
    background: var(--primary);
    color: var(--on-primary);
}

button[outline] {
    border: 1px solid var(--outline);
    color: var(--primary);
}

button[large] {
    padding: 10px 24px;
    font-size: large;
}


/* Copy task url box */
div.task {
    display: flex;
    border: 1px dashed var(--outline);
    background: var(--surface-container-high);
    color: var(--on-surface);
    border-radius: var(--shape-medium);
    padding: 12px;
    gap: 12px;
    width: calc(100% - 2 * 12px);
}

div.task, div.task > div:first-child {
    display: flex;
    align-items: center;
    flex-direction: row;
}

div.task > div:last-child {
    display: flex;
    flex-direction: column;
}

div.task > div:last-child > span:first-child {
    font-size: large;
    font-weight: bold;
}

div.task > div:last-child > span:last-child {
    font-size: small;
    color: var(--on-surface-variant);
}

/* Giveaway container */

div.giveaway-container {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--outline);
    background: var(--surface-container);
    color: var(--on-surface);
    border-radius: var(--shape-medium);
    padding: 12px;
    gap: 12px;
    width: calc(100% - 2 * 12px);
}

div.giveaway-container-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

div.giveaway-container-row > div:last-child {
    display: flex;
    flex-direction: column;
}

div.giveaway-container-row > div:last-child > span:first-child {
    font-size: large;
    font-weight: bold;
}

div.giveaway-container-row > div:last-child > span:last-child {
    font-size: small;
    color: var(--on-surface-variant);
}

body.dark div[giveawayStatusActive] > div:first-child {
    /* background: var(--primary); */
    color: lightgreen;
}

body.light div[giveawayStatusActive] > div:first-child {
    /* background: var(--primary); */
    color: green;
}

body.dark div[giveawayStatusFinished] > div:first-child {
    /* background: var(--primary); */
    color: lightcoral;
}

body.light div[giveawayStatusFinished] > div:first-child {
    /* background: var(--primary); */
    color: coral;
}