@import url('https://fonts.googleapis.com/css?family=Bungee');

@import 'immaterial/immaterial';
@import 'immaterial/typography';

.navbar {
    background-color: #00695C;

    &.disable-feed {
        .right-button.show-feed {
            display: none;
            visibility: hidden;
        }
    }

    .navbar-brand {
        // font-family: 'Cuprum', sans-serif;
        font-family: 'Bungee', cursive;
    }
}

.top-prompts {
    display: flex;
    justify-content: space-between;
    margin: 10px 0 14px;

    .pagination-page-links {
        margin: 12px 0;
    }

    .add-button {
        margin: 0;
        margin-right: -6px;

        .btn {
            @include z-depth(2);
            @include z-depth-transition(
              background-color .28s cubic-bezier(0.4, 0, 0.2, 1),
              color .28s cubic-bezier(0.4, 0, 0.2, 1)
            );

            &:hover {
                @include z-depth(8);
            }

            .button-inner {
                padding-left: 6px;
                padding-right: 6px;
            }
        }
    }
}

.raw-list {
    display: none;
    visibility: hidden;
}

.tabular-list {
    display: none;

    &.shown {
        display: block;
    }

    .tabular-list-item {
        &:hover {
            background: #F2F2F2;
        }
    }
}

.pagination-links {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}


.tight-list {
    margin: 0 auto;
    max-width: 400px;
}


.unpadded {
    .tabbed-area {
        padding: 12px 24px 24px;
    }
}

.create-staffer,
.edit-staffer {
    .loading-cover {
        &::after {
            background-color: rgba(255,255,255,0.925);
            bottom: 0;
            content: '';
            left: 0;
            opacity: 0;
            transition: opacity 375ms cubic-bezier(0, 0, 0.2, 1) 100ms;
            pointer-events: none;
            position: absolute;
            right: 0;
            top: 0;
            will-change: opacity;
            z-index: 100;
        }

        &.loading {
            &::after {
                opacity: 1;
                pointer-events: all;
            }

            .loading-label {
                opacity: 1;
            }
        }

        .loading-label {
            height: 120px;
            left: calc((100% - 300px) / 2);
            margin-top: 0;
            opacity: 0;
            position: absolute;
            right: calc((100% - 300px) / 2);
            text-align: center;
            top: calc((100% - (120px)) / 2);
            transition: opacity 280ms cubic-bezier(0, 0, 0.2, 1);
            width: 300px;
            will-change: opacity;
            z-index: 151;

            svg {
                margin: 19px 0 20px;
            }

            p {
                margin: 0 0 19px;
            }
        }
    }
}

.create-staffer {
    .form-holder {
        position: relative;

        #slack-entry {
            margin: 54px auto 0;
            max-width: 480px;
            padding-bottom: 60px;
            width: 100%;

            &::after {
                top: 51px;
            }

            p.emphasized {
                @include typography-subheading-1();

                color: #727272;
                margin: 0 0 15px;

                span {
                    color: #575757;
                    font-weight: 500;
                    letter-spacing: 0;
                    text-transform: uppercase;
                }
            }

            .inline-form {
                display: flex;
                flex-direction: row;
                margin-top: 66px;

                .form-group {
                    display: block;
                    flex: 1 1 auto;
                    margin: 6px 18px 0 0;

                    input {
                        margin: 0;
                    }

                    .help-block {
                        box-sizing: border-box;
                        height: 20px;

                        .material-icons {
                            color: #00796B;
                            display: inline-block;
                            float: left;
                            font-size: 18px;
                            font-weight: bold;
                            height: 12px;
                            line-height: 12px;
                            margin-right: 4px;
                            margin-top: 0px;
                        }
                    }
                }

                .button-holder {
                    display: flex;
                    flex: 0 0 auto;
                    margin-top: 0;
                }
            }

            .loading-label {
                margin-top: 26px;
                top: calc(((100% - 51px) - (120px)) / 2);
            }
        }
    }
}

#snackbars {
    &.edit-bar-adjust {
        .snackbar-active:not(.snackbar-align-start) {
            transform: translate(-50%, -48px);
        }
    }

    .snackbar-text {
        margin-right: 25px;
    }
}


@keyframes checkmark {
    0% {
        stroke-dashoffset: 17px;
    }

    100% {
        stroke-dashoffset: 0
    }
}

@keyframes checkmark-circle {
    0% {
        stroke-dashoffset: 76px;
    }

    100% {
        stroke-dashoffset: 0px;
    }
}
