RepoHeader.scss

@import '../components/Breadcrumb';
@import './actions/CopyLinkAction';
@import './RepositoriesPopover';
@import './RepoHeaderBreadcrumbNavItem';

.repo-header {
    flex: none;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;
    align-items: stretch;
    border-style: solid;
    border-width: 0 0 1px;

    &__action-list-item {
        // Have a small gap between buttons so they are visually distinct when pressed
        // stylelint-disable-next-line declaration-property-unit-whitelist
        margin-left: 1px;

        &:hover {
            .theme-dark & {
                background: $color-bg-1;
            }
            .theme-light & {
                background: $color-light-bg-2;
            }
        }
    }

    &__action-item--pressed {
        .theme-dark & {
            background-color: $color-bg-2;
            color: $color-text-3;
        }
        .theme-light & {
            background-color: $color-light-bg-4;
            color: $color-light-text-1;
        }
    }

    .navbar-nav {
        white-space: nowrap;

        .nav-item {
            display: flex;
            align-items: stretch;

            .nav-link {
                user-select: none;
            }
        }
    }

    &__repo-basename {
        font-weight: bold;
    }

    &__alert {
        margin: 0 0.25rem;
        padding: 0.125rem 0.25rem;
        cursor: default;
        user-select: none;
    }

    &__icon-chevron {
        opacity: 0.6;
        margin: auto;
    }

    .copy-link-action {
        opacity: 0;
    }
    &:hover .copy-link-action {
        opacity: 1;
    }

    &__spacer {
        flex: 1 1 0;
    }

    .theme-dark & {
        border-color: #233043;
    }

    .theme-light & {
        border-color: $color-light-border;
    }
}