@import '../shared-styles/index';

:host(.nx-action) {
    display: block;
    @include type-style(action);
    appearance: none;
    outline: none;
    box-shadow: none;
    border: none;
    margin: 0;
    cursor: pointer;
    padding: nx-spacer(2xs) nx-spacer(s) nx-spacer(2xs) 0;
    width: 100%;
    transition:
        all 0.2s ease,
        padding 0 none;
    text-decoration: none;
    color: v(action-color);
    background-color: v(action-background-color);

    &:hover {
        color: v(action-hover-color);
        background-color: v(action-hover-background-color);
    }

    &.is-expanded {
        font-weight: nx-font-weight(bold);

        .nx-action__expand-icon {
            transform: rotateZ(90deg);
        }
    }

    &.is-expandable {
        .nx-action__wrapper::before {
            flex: 0 1 nx-spacer(2m);
            max-width: nx-spacer(2xs);
            min-width: nx-spacer(3xs);
        }
    }

    &.is-selected {
        color: v(action-selected-color);
        background-color: v(action-selected-background-color);
        font-weight: nx-font-weight(bold);
    }

    &.nx-tree-node--with-padding {
        .nx-action__wrapper::before {
            flex-shrink: 0;
        }
    }

    // don't show inner dotted border on firefox
    &::-moz-focus-inner {
        border: 0;
    }

    [dir='rtl'] & {
        padding: nx-spacer(2xs) 0 nx-spacer(2xs) nx-spacer(s);
    }
}

:host.cdk-keyboard-focused {
    @include focus-style-inset;
    border-radius: 2 * nx-border-radius(s);
}

.nx-action__expand-icon {
    display: flex;
    justify-content: center;
    transition: all 0.2s ease;
    transform: rotateZ(0);
    margin-right: nx-spacer(2xs);
    margin-top: 3px;
    flex: 0 0 auto;
    font-size: v(action-expand-icon-size);

    :host-context([dir='rtl']) & {
        margin-right: initial;
        margin-left: nx-spacer(2xs);
        transform: rotateZ(180deg);
    }
}

.nx-action__wrapper {
    display: flex;
    align-items: flex-start;
    position: relative;
    overflow: hidden;

    &::before {
        content: '';
        display: block;
        flex: 0 1 nx-spacer(2m);
        min-width: nx-spacer(s);
        height: 1em;
    }
}

.nx-action-icon__container {
    font-size: v(action-icon-size);
    padding-right: nx-spacer(s);
    flex: 0 0 auto;
    position: relative;
    justify-content: center;
    display: flex;
    margin-top: 2px;

    :host-context([dir='rtl']) & {
        padding-right: initial;
        padding-left: nx-spacer(s);
    }
}

::ng-deep .nx-action__icon {
    font-weight: nx-font-weight(regular);
}

// this is to overwrite if icon size s is used for the action icon (previously used in examples)
::ng-deep .nx-action__icon.nx-icon--s {
    font-size: inherit;
}

.nx-action__label {
    flex: 1 1 50%;
    text-align: left;
    word-break: break-word;

    :host-context([dir='rtl']) & {
        text-align: right;
    }
}

@media screen and (forced-colors: active) {
    :host(.nx-action) {
        &.is-selected,
        &:hover {
            forced-colors-adjust: none;
            background-color: highlight;
            color: highlightText;
            forced-color-adjust: preserve-parent-color;
            font-weight: nx-font-weight(regular);
        }
    }
}
