@charset "utf-8";

// Genernal classes and modules
.screen-reader {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

.wrapper {
    margin: auto;
    max-width: $boundary;
}

.radius {
    border-radius: $general;
}

// Buttons
.button {
    padding: 8px .75rem;
    color: $black;
    border: none;
    border-radius: 15rem;
    background: $gray;
}

.button-default {
    color: $blue;
    background-color: transparent;
    border: 2px solid $blue;
    transition: $fast all;
    &:hover {
        color: $white;
        background-color: $blue;
    }
}

.button-activated {
    color: #fff;
    background-color: $green;
}

.button-primary {
    color: $white;
    background-color: $blue;
    transition: $fast all;
    &:hover {
        color: $white;
        background-color: darken($blue, 15%);
    }
}

.button-small {
    padding: 4px 0.625rem;
    font-size: 0.75rem;
}

// Button group
.button-group {
    display: inline-block;
    list-style: none;
    > .button-group-common {
        display: inline-block;
    }
    > .button:first-child {
        border-radius: 15rem 0 0 15rem;
        margin-right: -4px;
    }
    > .button:last-child {
        border-radius: 0 15rem 15rem 0;
    }
    li {
        color: $blue;
        background-color: rgba($white, 0.2);
        &:hover {
            a {
                color: $white;
            }
        }
    }
    > .active {
        color: $white;
        background-color: $blue;
        a {
            color: $white;
        }
    }
}

// Tool Tip
.tool-tip-parent {
    position: relative;
    &:hover {
        .tool-tip {
            display: block;
        }
    }
}

.tool-tip {
    padding: 10px 0.75rem;
    border-radius: .2rem;
    color: $white;
    background: rgba($black, 0.85);
    position: absolute;
    left: 0;
    bottom: 100%;
    z-index: 150;
    display: none;
    &:after {
        border: 5px solid transparent;
        border-top-color: rgba($black, 0.85);
        content: "";
        position: absolute;
        left: 10px;
        bottom: -10px;
    }
    &.right {
        left: auto;
        right: 0;
        &:after {
            left: auto;
            right: 10px;
        }
    }
    &.bottom {
        top: 100%;
        bottom: auto;
        &:after {
            top: -10px;
            bottom: auto;
            border-top-color: transparent;
            border-bottom-color: rgba(0, 0, 0, 0.85);
        }
    }
    &.nowrap {
        white-space: nowrap;
    }
}


.action {
    position: relative;
    .toggle {
        border: none;
        border-left: 1px solid darken($gray, 6%);
        border-bottom: 1px solid darken($gray, 6%);
        background: none;
        padding: 2px 8px;
        transition: $fast all;
    }

    &:hover, &.open {
        border-top-right-radius: $general;
        background: $blue;

        .caret {
            border-top-color: $white;
        }
    }
    .caret {
        border-top-color: darken($gray, 30%);
        vertical-align: middle;
    }


    .action-dropdown {
        display: none;
        position: absolute;
        right: 0;
        top: 102%;
        list-style: none;
        margin: 0;
        padding: 0;
        background: $white;
        border: 1px solid darken($gray, 6%);
        border-radius: $general;
        box-shadow: 0 1px 3px 0 rgba($black, 0.2);

        a {
            display: block;
            padding: 3px 12px;
            white-space: nowrap;

            &:hover {
                color: $white;
                background-color: $blue;
            }
        }

        &.open {
            display: block;
        }
    }
}

.card {
    border-radius: $general;
    background: $white;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
    transition: $normal box-shadow;
    &:hover {
        box-shadow: 0 1px 25px 0 rgba(0, 0, 0, 0.2);
    }
}

// breadcrumb
.breadcrumb {
    padding-left: 0;
    margin: 0;
    background: none;
    > li {
        text-shadow: none;
        font-size: 13px;
    }
}