@import "../variables";
@import "~cosmoUiVariables";

$action-box-border: 1px solid $accent_color !default;
$action-box-border-radius: 6px !default;
$action-box-item-width: 35px !default;
$action-box-item-height: 28px !default;
$action-box-fg: $primary !default;
$action-box-fg-disabled: $gray-light !default;

.container {
    background-color: $white;
    box-sizing: border-box;
    border: $action-box-border;
    border-radius: $action-box-border-radius;
    position: absolute;
    top: -(($action-box-item-height / 2) + 7);
    right: 5%;
    //z-index: 100;
    :last-child {
        border-right: transparent;
    }
}

.item {
    box-sizing: border-box;
    width: $action-box-item-width;
    height: $action-box-item-height;
    border-right: 1px solid $primary;
}

.icon {
    width: 18px;
    height: 18px;
    margin-top: 5px;
    margin-left: 8px;
    cursor: pointer;
    use {
        fill: $action-box-fg;
    }
}

.statusIcon {
    position: absolute;
    right: 4px;
    top: 2px;
    use {
        fill: $red;
    }
}

.disabled {
    use {
        fill: $action-box-fg-disabled;
    }
}

.disabledStroke {
    use {
        stroke: $action-box-fg-disabled;
    }
}