.FileBrowser {
    position: static;
    flex-basis: 100%;
}

.FileBrowser-selectWrapper {
    margin: -0.75rem -0.75rem 0.75rem -0.75rem;
    padding: 0.5rem 0.75rem;
    background-color: rgba($color-frame-border, 0.05);

    .select2-container {
        @include font(caption);
        @include margin-inline(start, -0.25rem);
        margin-bottom: -1px;
        min-width: 15em;
    }

    select:focus,
    select:active {
        outline: none;
    }
}

.FileBrowser-select-label {
    @include font(label);
    display: block;
    width: auto;
    padding: 0.25rem 0;
    font-weight: bold;
}

.select2-selection.select2-selection--single {
    border-color: $color-frame-border;

    .select2-container--focus & {
        outline: none;
        border-color: $color-link;
    }
}

.select2-results__option {
    @include font(caption);
    min-width: 15em;

    &[aria-selected=true] {
        background-color: rgba($color-frame-border, 0.1) !important;
    }
}

.select2-results__option--highlighted[aria-selected] {
    background-color: $color-header-background !important;
    color: $color-header-content !important;
}

.FileBrowser-item {
    display: none;

    &.is-active {
        display: block;
    }
}

@include mq($from: medium) {
    .Frame.is-closed {
        .FileBrowser-select-label {
            position: relative;
            width: 10rem;
            display: inline-block;
        }
    }
}

@include mq($from: large) {
    .Frame:not(.is-closed) {
        .FileBrowser-select-label {
            position: relative;
            width: 10rem;
            display: inline-block;
        }
    }
}