// slightly lighten a colour
@function tint($color, $percentage) {
    @return mix(white, $color, $percentage);
}

// slightly darken a colour
@function shade($color, $percentage) {
    @return mix(black, $color, $percentage);
}

// Neutral Grey colourscheme (overrides Classic Yellow defaults)

$flat-theme:                          1;

$color-text-button:                   #000000;
$color-text-button-hover:             #000000;
$color-text-button-active:            #000000;
$color-text-button-disabled:          #000000;
$color-gradient-from:                 #eeeeee;
$color-gradient-to:                   #eeeeee; // nullify gradient (use flat colours)
$color-accent-gradient-from:          #c7e0f6;
$color-accent-gradient-to:            #c7e0f6; // nullify gradient (use flat colours)
$color-selecting:                     #c7e0f6;
$color-selected:                      lighten($color-selecting, 6%);
$color-background:                    #f7f7f7;
$color-background-box:                #ffffff;
$color-button-gradient-from:          #9dc8ef;
$color-button-gradient-to:            #9dc8ef; // nullify gradient (use flat colours)
$color-button-primary-gradient-from:  #9ccc66;
$color-button-primary-gradient-to:    #9ccc66; // nullify gradient (use flat colours)
$color-button-selected-gradient-from: tint($color-button-gradient-from, 33%);
$color-button-selected-gradient-to:   tint($color-button-gradient-to, 33%); // nullify gradient (use flat colours)

$dark-color-text-button:              #000000;
$dark-color-text-button-hover:        #000000;
$dark-color-text-button-active:       #000000;
$dark-color-text-button-disabled:     #000000;
$dark-color-background:               #373e45;
$dark-color-gradient-from:            shade($dark-color-background, 24%);
$dark-color-gradient-to:              shade($dark-color-background, 24%); // nullify gradient (use flat colours)

$border-radius:                       0.3em;

// import the default Hive (Classic Yellow) theme
@import "hive-default";

@media screen {
    .txp-nav > ul > li {
        border-right-color: shade($color-accent-gradient-to, 16%);
        background: $color-accent-gradient-to;

        &:first-child {
            border-left-color: shade($color-accent-gradient-to, 16%);
        }

        > a {
            &:hover {
                background: rgba($color-text-inverse, 0.4);
            }
        }

        &.selected > a {
            background: rgba($color-text-inverse, 0.4);

            &:hover {
                background: rgba($color-text-inverse, 0.6);
            }
        }
    }

    tr {
        border-color: $color-border;
    }

    @include dark-mode {
        tr {
            border-color: $dark-color-border-extra-light;
        }
    }

    .txp-list {
        tbody tr,
        thead th,
        thead th:first-child {
            border-color: $color-border;
        }
    }

    @include dark-mode {
        .txp-list {
            tbody tr,
            thead th,
            thead th:first-child {
                border-color: $dark-color-border-extra-light;
            }
        }
    }

    .txp-edit,
    .txp-details {
        background: $color-background;
    }

    .dropdown-menu {
        border-radius: 0;
        background: #ffffff;

        li {
            &:hover {
                background: $color-selected;
            }

            &.selected {
                background: $color-selecting;
            }
        }
    }

    .ui-menu,
    .switcher-list li.active,
    .switcher-list li:nth-child(odd):hover,
    .ui-tabs-nav .ui-tabs-active,
    .ui-tabs-vertical .ui-tabs-nav .ui-tabs-active {
        background: #ffffff;
    }

    @include dark-mode {
        .switcher-list li.active,
        .ui-tabs-vertical .ui-tabs-nav .ui-tabs-active {
            background: $dark-color-highlight-box;
        }
    }

    .txp-upload-progress::-webkit-progress-value {
        background-color: $color-button-primary-gradient-to;
    }

    .txp-upload-progress::-moz-progress-bar {
        background-color: $color-button-primary-gradient-to;
    }

    .txp-upload-progress::-ms-fill {
        background-color: $color-button-primary-gradient-to;
    }

    .ui-progressbar-value {
        background-color: $color-button-primary-gradient-to;
    }

    .ui-tabs-vertical {
        .ui-tabs-nav {
            border-bottom-color: $color-border;
        }

        .ui-tabs-nav li {
            border-color: $color-border;
            border-bottom-color: transparent;
        }
    }
}



/* ==========================================================================
   Additional layout for devices < 547px
   ========================================================================== */


@media (max-width: $break-small) {

    /**
     * Collapse jQuery UI tabs responsively.
     */

    .ui-tabs:not(.ui-tabs-vertical) .ui-tabs-nav {
        border-bottom-color: $color-border;

        li {
            border-color: $color-border;
            border-bottom-color: transparent;
        }
    }

    @include dark-mode {
        .ui-tabs-nav .ui-tabs-active {
            background: $dark-color-highlight-box;
        }
    }
}