.b-row-expander-body {
    box-shadow                  : inset 2px 2px 5px 0 var(--b-neutral-95);

    --b-row-expander-padding    : 1em;
    --b-row-expander-background : var(--b-neutral-99);

    .expander-content {
        flex                 : 1;
        padding-inline-start : 2em;
    }
}

.text-info {
    display               : grid;
    grid-template-columns : 2fr 1.5fr;
    max-width             : 20em;
    row-gap               : .5em;
    margin-bottom         : 1em;
}

.buttons {
    position         : absolute;
    inset-inline-end : 3em;
    top              : 1em;
    display          : flex;
    gap              : .3em;
    user-select      : none;

    > div {
        cursor        : pointer;
        padding       : .5em 1em;
        font-size     : 1.1em;
        border        : 1px solid #2667c8;
        /* border-radius : .5em; */
        border-radius : var(--b-button-border-radius);
        color         : #2667c8;
    }

    > div:hover {
        background-color : rgba(38, 103, 200, 0.3);
    }
}

.badge {
    font-size     : 0.9em;
    width         : 2.2em;
    height        : 2.2em;
    line-height   : 2.2em;
    background    : #009688;
    color         : white;
    border-radius : 50%;
    text-align    : center;
    font-weight   : bold;
}

.women .badge {
    background : #896659;
}

.gold .badge {
    background : #ffc107;
}

.silver .badge {
    background : #C0C0C0;
}

.bronze .badge {
    background : #eb8d02;
}

/* Inserting text into the expander column cell */
[data-column="expanderActionColumn"].b-action-cell:before {
    content           : 'More';
    margin-inline-end : .5em;
}

.women {
    color       : #896659;
    font-weight : bold;
}

.men {
    color       : #009688;
    font-weight : bold;
}

.splits-grid {
    display               : grid;
    column-gap            : 4em;
    grid-template-columns : .3fr 1fr 3fr 1fr 1fr 1fr 1fr;
    height                : 180px;
    width                 : 100%;
    flex                  : 1;

    .pace {
        display     : flex;
        align-items : center;
    }

    .pace-text {
        flex        : 1;
        white-space : nowrap;
    }

    .pace-bar {
        background : grey;
        height     : 0.5em;
        flex       : 1;
        margin-top : .2em;
    }

    .pace-bar-inner {
        background : #a0cea0;
        height     : .5em;
    }

    .header {
        font-weight : bold;
    }

    > div {
        vertical-align : middle;
        padding-top    : .5em;
        white-space    : nowrap;
    }

    .centered {
        text-align : center;
    }

}