$width:    50*$font-size;
$height:   20*$line-height;

div#potato-preferences {
    background-color:         $white;
    z-index:                  999;
    overflow:                 auto;
    margin:                   auto;
    position:                 fixed;
    top:                      5%;
    left:                     50%;
    height:                   $height;
    max-height:               $height;
    width:                    $width;
    margin-left:              -$width/2;
    transition:               opacity .1s linear,top .1s ease-out;
    box-shadow:               0 1px 10px rgba(0,0,0,0.6);
    border-radius:            0.2*$font-size;
    outline:                  0;
    background-clip:          padding-box;
    display:                  flex;
    flex-direction:           column;
}

header.potato-preferences {
    $header-height:           $height/10;

    flex:                     0 0 $header-height;
    background-color:         lighten($glaciergray, 15%);
    display:                  flex;
    justify-content:          space-between;
    flex-direction:           row;
    border-bottom:            1px solid lighten($glaciergray, 5%);

    hgroup {
        display:              flex;
        flex-direction:       column;
        justify-content:      center;
        height:               $header-height;
        align-self:           flex-start;
    }

    h1 {
        display:              flex;
        flex-direction:       column;
        align-items:          center;
        justify-content:      center;
        margin:               0;
        padding:              0;
        display:              inline-block;
        font-size:            1.3*$font-size;
        font-weight:          900;
        padding-left:         1.3*$font-size;
    }

    div {
        align-self:           flex-end;
        display:              flex;
        flex-direction:       column;
        justify-content:      center;
        height:               $header-height;
    }

    a.done {
        background-color:     darken($duskblue, 5%);
        margin-right:         0.5*$font-size;
        padding-right:        0.8*$font-size;
        padding-left:         0.8*$font-size;
        padding-top:          0.2*$line-height;
        padding-bottom:       0.2*$line-height;
        border-radius:        4px;
        font-weight:          600;
        font-size:            1.1*$font-size;
        color:                $white;
        box-shadow:           1px 1px 4px rgba(0,0,0,0.2);
    }
}

main.potato-preferences {
    flex:                     1 1 auto;
    display:                  flex;
    flex-direction:           row;
}

nav.potato-preferences {
    flex:                 0 0 $width/4;
    background-color:     lighten($glaciergray, 20%);
    border-right:         1px solid lighten($glaciergray, 5%);

    a.menu {
        text-decoration:  none;
        color:            $black;
        display:          block;
        font-size:        1.1*$font-size;
        padding-left:     $font-size;
        padding-top:      0.5*$line-height;
        padding-bottom:   0.5*$line-height;

        &:hover {
            background-color: lighten($glaciergray, 17%);
            color:            $classicblue;
        }

        &.active {
            background-color: darken($duskblue, 5%) !important;
            color:            $white !important;
            font-weight:      600;
        }
    }
}

section.potato-preferences {
    flex:                 1 1 auto;
    background-color:     $white;
    padding:              $font-size;
    font-size:            1.1*$font-size;
    color:                $black;
    line-height:          1.5*$line-height;

    fieldset {
        outline: 0;
        border:  0;
        padding: 0;
    }

    b,
    legend {
        font-weight:      600;

        &.green {
            color:        $treetop;
        }
    }

    p {
        margin:           0;
    }

    &.notifications {
        p.desktop-enablebutton {
            margin-top:       0.5*$line-height;
            margin-bottom:    0.5*$line-height;
        }
        a.desktop-enablebutton {
            background-color: lighten($treetop, 10%);
            padding-left:     $font-size;
            padding-right:    $font-size;
            padding-top:      0.4*$font-size;
            padding-bottom:   0.4*$font-size;
            border-radius:    4px;
            color:            $white;
            font-weight:      600;
            text-shadow:      0 1px rgba(0,0,0,0.2);

            &::before {
                content:       '\f0f3';
                font-family:   FontAwesome;
                font-size:     $font-size;
                padding-right: $font-size;
            }
        }
        a.notification-test {
            color:             $classicblue;
            font-size:         0.9*$font-size;
            margin-left:       $font-size;
            text-decoration:   none;
            font-weight:       400;

            &::before {
                content:       '\f0a2';
                font-family:   FontAwesome;
                font-size:     0.8*$font-size;
                padding-right: 0.3*$font-size;
            }

            &:hover {
                text-decoration: underline;
            }
        }

        .small {
            font-size:         0.9*$font-size;
            font-weight:       400;
        }

        label {
            font-size:         $font-size;
            line-height:       1.2*$line-height;
            display:           block;
            font-weight:       600;
            vertical-align:    middle;
        }

        input {
            font-size:         1.2*$font-size;
            margin-right:      0.5*$font-size;
            margin-left:       0.8*$font-size;
        }
    }
}

#click-mask {
    position:             absolute;
    top:                  0;
    bottom:               0;
    left:                 0;
    right:                0;
    z-index:              900;
    background-color:     rgba(0,0,0,0.1);
}

