@import "../variables/dimensions";
@import "../variables/colors";

$tools-column-width: 280px;

.tools-menu {
    display: flex;
    > .tools-menu-column {
        width: $tools-column-width;
        padding-top: $default-padding;

        > .tools-category {
            > .tools-category-title {
                color: $blackColor;
                border-bottom: 1px solid $primaryColor;
                padding-bottom: $grid-gutter-width;
                margin-bottom: 0px;
                margin-left: $default-padding;
                width: $tools-column-width - 2 * $default-padding;
            }

            > li {
                > a {
                    padding: $grid-gutter-width $default-padding;
                    display: block;
                    margin: 0px;
                    color: $blackColor;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                    position: relative;

                    &:hover {
                        background-color: $lightestGrayColor;
                        color: $primaryColor;
                    }

                    &:active {
                        background-color: $lightGrayColor;
                        color: $blackColor;
                    }

                    &.link-item {
                        padding-right: $default-padding * 2;
                    }

                    .rc-icon {
                        position: absolute;
                        right: $default-padding;
                        top: $grid-gutter-width;
                    }

                }

                &.active {
                    > a {
                        background-color: $whiteColor;
                        color: $primaryColor;
                    }
                }

                &.disabled {
                    > a {
                        background-color: $whiteColor;
                        color: $mediumGrayColor;
                    }
                }

            }
        }
    }
}