@import '../../common/variables';
@import '../../../styles/constants/buttons';

.bcs-VersionsItem {
    $bcs-VersionsItemButton-horizontal: 10px;
    $bcs-VersionsItemButton-vertical: 15px;

    position: relative;

    .bcs-VersionsItemButton {
        padding: $bcs-VersionsItemButton-vertical $bcs-VersionsItemButton-horizontal;
    }

    .bcs-VersionsItemActions {
        .aria-menu {
            padding-top: 8px;
            padding-bottom: 8px;
        }
    }

    .bcs-VersionsItemActions-toggle {
        position: absolute;
        top: $bcs-VersionsItemButton-vertical;
        right: $bcs-VersionsItemButton-horizontal;

        &:focus {
            border: $bdl-btn-border-width solid $primary-color;
            box-shadow: $bdl-btn-primary-box-shadow;
        }
    }
}

.bcs-VersionsItem-badge {
    flex: 1 0 auto;
    margin-right: 10px;
}

.bcs-VersionsItem-current {
    color: $bdl-box-blue;
    font-weight: bold;
}

.bcs-VersionsItem-details {
    flex: 1 1 100%;
    overflow: hidden;

    & > :not(.bcs-VersionsItem-info) {
        margin-right: 35px; // Avoid flowing under action toggle button
    }
}

.bcs-VersionsItem-log {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.bcs-VersionsItem-info {
    display: flex;
    align-items: center;
    color: $bdl-gray-65;
    white-space: nowrap;
}

.bcs-VersionsItem-retention {
    display: flex;
    align-items: center;
    margin-top: 8px;
    color: $bdl-gray-65;
}

.bcs-VersionsItem-footer {
    color: $bdl-gray-65;
    font-size: 12px;
}

.bcs-VersionsItem-size {
    overflow: hidden;
    text-overflow: ellipsis;

    &::before {
        padding-right: 5px;
        padding-left: 5px;
        font-size: 8px;
        vertical-align: top;
        content: '•';
    }
}
