/*
 * Global colors
 * https://material.io/design/color/the-color-system.html
 */

/* Black font */
$lb50: #e1f5fe;
$lb100: #b3e5fc;
$lb200: #81d4fa;
$lb300: #4fc3f7;
$lb400: #29b6f6;
$lb500: #03a9f4;
$lb600: #039be5;

/* White font */
$lb700: #0288d1;
$lb800: #0277bd;
$lb900: #01579b;

/* The shadow under floating elements */
$shadow: 2px 2px 10px -2px slategray;

/*
 * Common elements
 */

.head {
    background: #b3e5fc;
    color: black;
    padding: 0.5em 1rem;
}

/* Alternating tables */
#request_table .request:nth-of-type(even) {
    background: white;
}

#request_table .request:nth-of-type(odd) {
    background: whitesmoke;
}

/**
 * RGB color intensity border
 * For semi-transparent elements,
 * e.g., unread forum post borders
 */
@mixin transparent-border($R: 0, $G: 0, $B: 0, $A: 1) {
    border: 2px solid rgba($R, $G, $B, $A);
}

/**
 * Fancy torrent search input
 */
@mixin common-elements() {
    border: none;
    background: white;
    font-size: 100%;
    margin: 0 0.25rem;
    padding: 0.5rem;
    outline: none;
}

input,
input[type="search"],
input[type="text"] {
    @include common-elements;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    transition: ease-in-out 0.1s;

    &:focus {
        border-bottom: 1px solid $lb100;
    }
}

select,
input[type="select"] {
    @include common-elements;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

checkbox,
input[type="checkbox"] {
    margin: 0;
    padding: 0;
}

input[type="file"] {
    border: none;
}

/* Buttons */
button:not(.editor-toolbar button),
input[type="button"],
input[type="submit"] {
    background: $lb200;
    border: none;
    border-radius: 0.25rem;
    box-shadow: $shadow;
    margin: 0 0.25rem;
    padding: 0.75rem 1rem;
    cursor: pointer;

    &:hover {
        background: $lb50;
    }

    &:focus {
        background: $lb300;
    }
}

/**
 * Alerts, Toolbox, etc.
 * Needs one unified error display
 * (torrent form, API keys use their own)
 */
@mixin alertbar($bg) {
    background: $bg;
    box-shadow: $shadow;
    text-align: center;
    color: black;
    font-weight: bold;
    /* font-size: 0.95rem; */
    width: 33%;
    margin: 2em auto;
    padding: 1rem;
}

.alertbar {
    @include alertbar($lb100);

    .warning {
        background: #ffe0b2;
    }

    .error {
        background: #ffcdd2;
    }
}

.token_error {
    @include alertbar(#ffcdd2);
}

.modbar a {
    margin: 0 0.5rem;
}

/* Inbox */
tr.unreadpm {
    background: #ffe0b2;
}

/* Used for loli/scat profile options */
/*
.search_warning {
  fill: #ffcdd2;
}
*/

/* coverCont */
#coverCont {
    padding: 0.5rem;
    box-shadow: $shadow;

    img {
        background: white;
        border: 2px solid $lb700;
    }
}
