@import "../../styles/sizes";
@import "../../styles/color";
@import "../../styles/flex";

.one-ui-divider {
    $root: &;
    background-color: color(grey,2,.5);
    display: flex;

    @include setMargin();
    @include setFlex();

    @at-root .one-ui-wrapper--direction{
        &-row > #{$root}{
            min-width: 1px;
            min-height: 100%;
            align-self: stretch;
        }
        &-column > #{$root}{
            min-height: 1px;
            min-width: 100%;
        }
    }

    &--color{
        &-grey{
            background-color: color(grey);
        }
        &-grey-2{
            background-color: color(grey,2);
        }
        &-grey-3{
            background-color: color(grey,3);
        }
    }

    &--transparent{
        background-color: transparent;
    }


}