@import '_mixins';
@import '_vars';

.table {
    &-fixed {
        table-layout: fixed;
    }

    &-borderless {
        td {
            border: 0;
        }
    }

    &-borderless-top {
        tr {
            &:first-child {
                td {
                    border: 0;
                }
            }
        }
    }

    &-middle {
        td {
            vertical-align: middle;
        }
    }

    &-items {
        & {
            margin-bottom: -4px;
        }

        th,
        td {
            & {
                padding: 15px;
            }

            &:first-child {
                padding-left: 20px;
            }

            &:last-child {
                padding-right: 20px;
            }
        }

        thead {
            th {
                color: $color-table-header;
                font-size: .8rem;
                font-weight: normal;
                border: 0;
                padding-top: 0;
            }
        }

        tbody {
            td {
                margin: 0;
                margin-bottom: 10px;
                vertical-align: middle;
            }

            tr {
                background: $color-table;
                border: 1px solid $color-border;
                border-bottom: 3px solid $color-border;
                margin-bottom: 10px;
            }
        }

        &-row,
        &-footer {
            padding: 15px 20px;
            background: $color-table-footer;
            border: 1px solid $color-table-border;
            border-bottom-width: 3px;
        }

        &-row {
            background: $color-table;
            margin-bottom: 4px;
        }

        &-footer {
            background: $color-table-footer;
            margin-top: 12px;
        }

        .spacer {
            border: 0;
            height: 6px;
        }
    }
}

.ng-invalid {
    &.ng-dirty {
        & {
            border-color: $color-theme-error;
        }

        &:hover,
        &:focus {
            border-color: $color-theme-error-dark;
        }
    }
}

.errors {
    &-box {
        position: relative;
    }

    &::after {
        @include absolute(2rem, auto, auto, .6rem);
        content: '';
        height: 0;
        border-style: solid;
        border-width: .4rem;
        border-color: $color-theme-error transparent transparent;
        width: 0;
    }

    & {
        @include absolute(-2.4rem, auto, auto, 0);
        @include border-radius(2px);
        color: $color-accent-dark;
        cursor: none;
        display: inline-block;
        font-size: .9rem;
        font-weight: normal;
        line-height: 2rem;
        padding: 0 .4rem;
        background: $color-theme-error;
    }
}

.form-hint {
    & {
        font-size: .8rem;
    }

    p {
        margin-top: .4rem;
        margin-bottom: 0;
    }
}

.form-error {
    @include border-radius(3px);
    @include truncate;
    color: $color-accent-dark;
    margin-top: 4px;
    margin-bottom: 10px;
    padding: 6px;
    background: $color-theme-error;
}

.form-group {
    &:last-child {
        margin: 0;
    }
}

.form-control-dark {
    & {
        @include transition(background-color .3s ease);
        @include placeholder-color(darken($color-accent-dark, 30%));
        background: $color-dark-background-accent;
        border: 0;
        color: darken($color-accent-dark, 20%);
    }

    &:focus {
        background: lighten($color-dark-background-accent, 2%);
        border: 0;
        color: $color-accent-dark;
    }
}

.modal {
    &-content {
        @include box-shadow(0, 6px, 16px, .4);
        border: 0;
    }

    &-dialog {
        @media (min-width: 576px) {
            margin-top: 70px;
        }
    }
}

.dropdown-menu {
    @include box-shadow(0, 6px, 16px, .2px);
    border: 0;
}

@mixin link-button($color) {
    & {
        color: $color;
    }

    &:focus {
        outline-color: transparent;
    }

    &:disabled {
        @include opacity(.4);
    }

    &:focus,
    &:active,
    &:hover {
        color: darken($color, 8%);
        border-color: transparent;
        background: transparent;
        text-decoration: none;
    }
}

.btn-cancel {
    padding: .2rem;
    font-size: 1.5rem;
    font-weight: normal;
}

.btn-link {
    &.btn-danger {
        @include link-button($color-theme-error);
    }

    &.btn-primary {
        @include link-button($color-theme-blue);
    }
}

.nav-dark {
    & {
        background: $color-dark-background;
    }

    .nav-item + .nav-item {
        margin: 0;
    }

    &.nav-pills {
        .nav-link {
            & {
                color: $color-dark-foreground;
            }

            &:hover {
                color: lighten($color-dark-foreground, 15%);
                border: 0;
                background: $color-dark-background;
            }

            &.active {
                & {
                    @include border-radius(0);
                    background: $color-dark-background-selected;
                    border: 0;
                    color: $color-dark-foreground-selected;
                }

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

.nav-light {
    &.nav-pills {
        .nav-link {
            &.active {
                & {
                    @include border-radius(0);
                }
            }
        }
    }
}