$active-background: $highlight-blue;

.itsec-component-master-detail {
    height: 100%;
    flex-shrink: 1;
    overflow-y: auto;
    display: flex;

    & .itsec-component-master-detail__master-list-container {
        position: relative;
        height: 100%;
        flex-shrink: 1;
        flex-grow: 1;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }

    &.itsec-component-master-detail--is-small .itsec-component-master-detail__master-list-container {
        border-right: none;
    }

    & .itsec-component-master-detail__master-list {
        border-spacing: 0;
        width: 100%;

        & thead th {
            position: sticky;
            top: 0;
            padding-top: 1em;
            padding-bottom: 1em;
            background: white;
            color: $dark-gray-500;
            text-transform: uppercase;
            font-weight: normal;
            border-bottom: 1px solid $light-gray-500;
            border-top: 1px solid $light-gray-500;
        }

        & th,
        & td {
            text-align: left;
            padding: 1em;
        }


        & tbody th {
            font-weight: normal;
        }

        & tbody tr:last-child td,
        & tbody tr:last-child th {
            border-bottom: none;
        }
    }

    &:not(.itsec-component-master-detail--borderless) .itsec-component-master-detail__master-list th,
    &:not(.itsec-component-master-detail--borderless) .itsec-component-master-detail__master-list td {
        border-bottom: 1px solid $light-gray-500;
    }

    &.itsec-component-master-detail--borderless .itsec-component-master-detail__master-list {
        & tbody th,
        & tbody td {
            padding-top: .3em;
            padding-bottom: .3em;
        }
    }

    & .itsec-component-master-detail__master {
        cursor: pointer;

        &:focus {
            outline: none;
            background: $active-background;
        }

        & :not(.itsec-component-master-detail__master--selected):not(.itsec-component-master-detail__master--selected-default):focus {
            background: lighten($active-background, 10);
        }

        & td:last-child {
            border-right: 3px solid transparent;
        }
    }

    & .itsec-component-master-detail__master--selected,
    &:not(.itsec-component-master-detail--is-small) .itsec-component-master-detail__master--selected-default {
        background: $active-background;

        & td:last-child {
            border-right-color: $blue-medium-500;
        }
    }

    &.itsec-component-master-detail--is-small .itsec-component-master-detail__master:hover {
        background: $active-background;
    }

    & .itsec-component-master-detail__detail-container {
        width: auto;
        max-width: 100%;
        flex-grow: 1;
        overflow-x: hidden;
    }

    &.itsec-component-master-detail--is-small {
        & .itsec-component-master-detail__detail-container {
            display: none;
        }

        &.itsec-component-master-detail--has-detail {
            & .itsec-component-master-detail__back {
                display: flex;
            }

            & .itsec-component-master-detail__master-list-container {
                display: none;
            }

            & .itsec-component-master-detail__detail-container {
                display: block;
            }
        }
    }

    &.itsec-component-master-detail--direction-vertical {
        flex-direction: column;

        & .itsec-component-master-detail__detail-container {
            flex-shrink: 0;
        }

        & .itsec-component-master-detail__detail-container {
            border-top: 1px solid $light-gray-500;
        }

        &.itsec-component-master-detail--borderless .itsec-component-master-detail__master-list {
            & tbody th,
            & tbody td {
                border-bottom: 1px solid transparent;
            }
        }

        & .itsec-component-master-detail__master td,
        & .itsec-component-master-detail__master th {
            border-top: 1px solid transparent;
        }

        & .itsec-component-master-detail__master td:first-child,
        & .itsec-component-master-detail__master th:first-child {
            border-left: 1px solid transparent;
        }

        & .itsec-component-master-detail__master td:last-child,
        & .itsec-component-master-detail__master th:last-child {
            border-right: 1px solid transparent;
        }

        & .itsec-component-master-detail__master--selected,
        &:not(.itsec-component-master-detail--is-small) .itsec-component-master-detail__master--selected-default {
            background: $active-background;

            & td,
            & th {
                border-top-color: $blue-medium-500;
                border-bottom-color: $blue-medium-500 !important;
            }

            & td:first-child,
            & th:first-child {
                border-left-color: $blue-medium-500;
            }

            & td:last-child,
            & th:last-child {
                border-right-color: $blue-medium-500;
            }
        }
    }

    &.itsec-component-master-detail--direction-horizontal {
        & .itsec-component-master-detail__master-list-container {
            flex-basis: 0;
            border-right: 1px solid $light-gray-500;
        }

        & .itsec-component-master-detail__detail-container {
            flex-basis: 0;
        }
    }
}

.itsec-component-master-detail__back.components-button.has-icon {
    padding: 0;
    box-shadow: none !important;
    margin-right: .5em;
    height: 18px;

    &:focus {
        outline-offset: 0 !important;
        outline-style: solid !important;
        outline-color: Highlight !important;

        @media (-webkit-min-device-pixel-ratio: 0) {
            outline-color: -webkit-focus-ring-color !important;
            outline-style: auto;
        }
    }
}
