.at-select {
    @include position(absolute, 0 null null 0);
    @include size(100%);
    background-color: var(--background-color);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    box-sizing: border-box;
    z-index: $z-index-no-modal;
    opacity: 1;
    padding: $medium-padding;

    .titlebar-hidden & {
        padding-top: $titlebar-padding-small;
    }
    .titlebar-hidden-inset & {
        padding-top: $titlebar-padding-large;
    }

    &__header {
        display: flex;
        &-text {
            flex: 1 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding-right: $base-padding-h;
        }
        &-filter {
            flex: auto 0;
            position: relative;
        }
        &-filter-input {
            width: 200px;
        }
        &-filter-clear {
            cursor: pointer;
            position: absolute;
            right: 0.7em;
            top: 0.7em;
        }
    }
    &__message {
        display: flex;
        margin-bottom: $base-padding-v * 2;
        &-text {
            flex: 1 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-right: $base-padding-h;
        }
    }
    &__hint {
        flex: 0.5 0;
        margin-bottom: $base-padding-v * 2;
        text-align: right;
        &-text {
            flex: 1 1;
            font-size: 0.8em;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-right: $base-padding-h;
        }
    }
    &__items {
        flex: 1;
        @include scrollbar-on-hover;
        margin-bottom: $base-padding-v;
        position: relative;
        overflow: hidden;
        > .scroller {
            display: flex;
            flex-direction: row;
            justify-content: center;
        }
    }
    &__table {
        flex: 1;
        width: 100%;
        overflow: hidden;
        border-collapse: collapse;
        table-layout: fixed;
        tr.at-select__item {
            border-right-width: 3px;
        }
        td,
        th {
            padding: $base-padding;
            overflow: hidden;
            text-overflow: ellipsis;
            word-wrap: break-word;
            &:first-of-type {
                width: 2em;
                text-align: center;
            }
            &:nth-of-type(3) {
                width: 25%;
            }
            &:nth-of-type(4) {
                width: 25%;
            }
            &:nth-of-type(5) {
                width: 2em;
            }
        }
    }
    &__item {
        @include area-selectable();
        &--active,
        &--active:hover {
            @include area-selected();
            cursor: pointer;
        }
        &--active {
        }
        &-options {
            text-align: center;
            &:hover {
                background: var(--background-color);
                .at-select__item--active & {
                    background: var(--action-color);
                }
            }
        }
    }
    &__empty-title {
        align-self: center;
    }
}