@import '../../../../styles/variables';

.ca-BarChart {
    $Bar-margin: .5px;
    $Bar-minSize: 2px;

    display: flex;
    flex: 1 1 auto;
    align-items: flex-end;
    justify-content: space-between;

    .ca-Bar {
        flex: 1 1 auto;
        margin: 0 $Bar-margin;

        &:first-child {
            margin-left: 0;
        }

        &:last-child {
            margin-right: 0;
        }
    }

    .ca-Bar-value {
        min-height: $Bar-minSize;
    }

    &.is-horizontal {
        flex-direction: column;
        align-items: start;
        min-width: $Bar-minSize;
        margin: $Bar-margin 0;

        .ca-Bar {
            &:first-child {
                margin-top: 0;
            }

            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    &.is-interactive {
        .ca-Bar:hover {
            background-color: $bdl-gray-05;
            cursor: pointer;

            .ca-Bar-value {
                background-color: $bdl-gray-80;
            }
        }
    }
}