/*!
 * 
  * Copyright (c) 2019-2023 Software AG, Darmstadt, Germany and/or Software AG USA Inc., Reston, VA, USA,
 * and/or its subsidiaries and/or its affiliates and/or their licensors.
 * 
 */

@import "../variables";
@import "../variables/cards_vars";
@import "../variables/buttons_vars";
@import "../mixins";

.dlt-card {
    @include component-vars(cards); //Mixin to define all the root variables
    width: inherit;
    height: auto;
    background: $cards-color-background;
    @include box-shadow($cards-elevation);
    padding: $cards-padding;
    position: relative;
    min-height: 120px;
    font-family: $cards-font-family;
    color: $cards-color-text;
    border-radius: $cards-border-radii;

    &.disabled {
        cursor: not-allowed;
    }

    &.dlt-card-draggable {

        -webkit-user-select: none;
        /* Chrome all / Safari all */
        -moz-user-select: none;
        /* Firefox all */
        -ms-user-select: none;
        /* IE 10+ */
        user-select: none;

        border: $cards-border-width-hover $cards-border-style-hover transparent;
        border-radius: $cards-border-radii;
        outline: 0;

        &:hover:not(.disabled),
        &:focus:not(.disabled) {
            @include box-shadow($cards-elevation-dragged);
            cursor: move;
            /* fallback if grab cursor is unsupported */
            cursor: grab;
            cursor: -moz-grab;
            cursor: -webkit-grab;
            border: $cards-border-width-hover $cards-border-style-hover transparent;

            &:active {
                cursor: grabbing;
                cursor: -moz-grabbing;
                cursor: -webkit-grabbing;
                border: $cards-border-width-hover $cards-border-style-hover transparent;
            }
        }

        &:focus:not(.disabled),
        &:focus:not(:hover) {
            border: $cards-border-width-hover $cards-border-style-hover $cards-color-primary;
        }
        svg {
            g {
                g {
                    rect {
                        fill: $cards-draggable-icon-color;
                    }
                }
            }
        }

        .dlt-icon-drag{
            font-size: var(--dlt-font-size-sm, 1rem);
            color: $cards-draggable-icon-color;
            position: absolute;
            top: var(--dlt-spacing-2-x, 1rem);
            right: var(--dlt-spacing-2-x, 1rem);
        }


    }

    // &:focus:not(.disabled) //,&:focus-within:not(.disabled)
    // {
    //     border: $cards-border-width-hover $cards-border-style-hover $cards-color-border-focus;
    //     @include box-shadow($cards-elevation-dragged);
    //     background: $cards-color-background-focus;
    //     color: $cards-color-text-focus;
    // }

    // &:active:not(.disabled){
    //     background: $cards-color-background-active; 
    //     border: $cards-border-width-hover $cards-border-style-hover $cards-color-border-focus;
    //     color: $cards-color-text-active;
    // }

    &:focus-within a:focus {
        text-decoration: none;
    }

    &.disabled:after {
        content: " ";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: rgba(255, 255, 255, $cards-opacity-disabled);
        cursor: not-allowed;
    }

    &.dlt-card-button {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin: 0 auto;
        padding-top: $cards-button-padding-top;
        min-height: 160px;

    }

    

    .dlt-card-title {
        display: flex;
        flex-flow: row wrap;

        h3 {
            font-weight: $cards-title-font-weight;
            font-size: $cards-title-font-size;
            margin-bottom: 0;
            margin-top: 0;
            line-height: $cards-title-line-height;

            display: flex;
            flex-flow: column wrap;
            flex: 1 1;
            align-self: center;

            &.with-icon {
                padding: $cards-title-padding;
            }

            &.truncate {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                display: block;
                padding-right: .5rem;
            }

            a {

                text-decoration: none;
                color: $cards-color-link;

                &:hover{
                    color: $cards-color-link-hover;
                }

                &::after {
                    position: absolute;
                    left: -2px;
                    right: -2px;
                    top: -2px;
                    bottom: -2px;
                    content: " ";
                }

                &:focus::after {
                    border: $cards-border-width-hover $cards-border-style-hover $cards-color-primary;
                }
            }

            span {
                // margin-top: $cards-title-sub-margin-top;
                margin-bottom: 0;
                padding-left: 0;
                font-weight: $cards-title-sub-font-weight;
                font-size: $cards-title-sub-font-size;
            }
        }

        div.icon-holder {
            width: $cards-icon-placeholder;
            height: $cards-icon-placeholder;
            display: flex;
            flex-basis: $cards-icon-placeholder;
            flex-shrink: 0;

            i {
                font-size: $cards-icon-placeholder-size;
                line-height: 1;
                color: $cards-icon-color;
            }
        }
    }

    .dlt-card-content {
        padding-top: $cards-content-padding-top;
        height: auto;
        overflow: hidden;

        p {
            font-size: $cards-font-size;
            line-height: $cards-line-height;
            margin: 0;
        }

        >*+* {
            margin-top: $cards-content-gap;
        }

        .card-icon-set {
            width: auto;
            height: auto;
            overflow: hidden;
            list-style: none;
            margin: 0;
            padding: 0;

            li {
                margin-right: .25rem;
                display: inline;

                i {
                    font-size: $cards-icon-placeholder-size;
                    line-height: 1;
                    color: $cards-color-icon;
                }
            }
        }
    }

    .dlt-card-actions {
        padding-top: $cards-action-icons-padding-top;
        display: flex;
        justify-content: flex-end;

        >*+* {
            margin-left: $cards-action-icons-gap;
        }

        .dlt-more-menu {
            height: $cards-icon-size-md;
            width: $cards-icon-size-md;

            button {
                position: absolute;
            }
        }
    }

    // .dlt-button-icon {
    //     width: $cards-icon-button-size;
    //     height: $cards-icon-button-size;
    //     line-height: 1;
    //     outline: 0;
    //     box-shadow: none;

    //     &:not(.btn-selected):not(:active):hover:enabled,
    //     &:focus {
    //         box-shadow: none;
    //     }

    //     i {
    //         font-size: $cards-icon-size;
    //     }

    //     &.icon-fav {
    //         position: absolute;
    //         top: $cards-icon-size-md;
    //         right: $cards-icon-size-md;
    //     }

    //     &.icon-selected {
    //         color: $cards-color-icon-interactive-accent;

    //         &:hover,
    //         &:focus {
    //             border-color: $cards-color-accent !important;
    //         }

    //         &:active {
    //             background: $cards-color-accent-light;
    //         }
    //     }
    // }

    .dlt-button-icon {
    background-color: transparent;
    padding: 0;
    margin: 0;
    justify-content: center;
    height: $buttons-icon-size-lg;
    width: $buttons-icon-size-lg;
    cursor: pointer;
    @include transition($buttons-time-transition $buttons-transition-effect);
  
    &:not(.btn-selected):not(:active):hover:enabled,
    &:focus {
      border: $buttons-border-width $buttons-border-style $buttons-color-primary;
      @include box-shadow(inset 0px 0px 0px 1px $buttons-color-primary);
      outline: none;
    }
  
    &:disabled {
      opacity: $buttons-opacity-disabled;
      color: $buttons-color-text-primary;
      cursor: not-allowed;
    }
  
    &:active:enabled {
      color: $buttons-color-text-primary;
      background-color: $buttons-color-secondary-active;
      border-color: $buttons-color-primary;
      outline: none;
      @include box-shadow(inset 0px 0px 0px 1px $buttons-color-primary);
    }
  
    .dlt-icon {
      font-size: $buttons-icon-size-lg;
    }
    &.icon-fav {
        position: absolute;
        top: $cards-icon-size-md;
        right: $cards-icon-size-md;
        color: $cards-icon-fav-color;
        
        &:not(.btn-selected):not(:active):hover:enabled,
        &:focus {
        border: $buttons-border-width $buttons-border-style $cards-icon-fav-color !important; 
        @include box-shadow(inset 0px 0px 0px 1px $cards-icon-fav-color) ;
        outline: none;
        }
    
        &:disabled {
        opacity: $buttons-opacity-disabled;
        color: $cards-icon-fav-color;
        cursor: not-allowed;
        }
    
        &:active:enabled {
        color: $cards-icon-fav-color;
        background-color: $cards-icon-fav-active;
        border-color: $cards-icon-fav-color;
        outline: none;
        @include box-shadow(inset 0px 0px 0px 1px $cards-icon-fav-color);
        }
    }
  }

}