$media-gt-md: 'screen and (max-width: 1279px)';
@mixin gt-md {
    @media #{$media-gt-md} {
        @content;
    }
}

$media-lt-sm: 'screen and (max-width: 959px)';
@mixin lt-sm {
    @media #{$media-lt-sm} {
        @content;
    }
}

$color__border: #e0e0e0;
@mixin cardBorder() {
    border: 1px solid $color__border;
}

$padding__page: 24px;
$padding__page__small: 16px;
@mixin responsivePadding($dir: all, $reverse: false) {
    @if $reverse==false {
        @if $dir=='all' {
            padding: $padding__page;
            @include gt-md {
                padding: $padding__page__small;
            }
        }
        @else if $dir=='top' {
            padding-top: $padding__page;
            @include gt-md {
                padding-top: $padding__page__small;
            }
        }
        @else if $dir=='right' {
            padding-right: $padding__page;
            @include gt-md {
                padding-right: $padding__page__small;
            }
        }
        @else if $dir=='bottom' {
            padding-bottom: $padding__page;
            @include gt-md {
                padding-bottom: $padding__page__small;
            }
        }
        @else if $dir=='left' {
            padding-left: $padding__page;
            @include gt-md {
                padding-left: $padding__page__small;
            }
        }
    }
    @else if $reverse==true {
        @if $dir=='all' {
            margin: -$padding__page;
            @include gt-md {
                margin: -$padding__page__small;
            }
        }
        @else if $dir=='top' {
            margin-top: -$padding__page;
            @include gt-md {
                margin-top: -$padding__page__small;
            }
        }
        @else if $dir=='right' {
            margin-right: -$padding__page;
            @include gt-md {
                margin-right: -$padding__page__small;
            }
        }
        @else if $dir=='bottom' {
            margin-bottom: -$padding__page;
            @include gt-md {
                margin-bottom: -$padding__page__small;
            }
        }
        @else if $dir=='left' {
            margin-left: -$padding__page;
            @include gt-md {
                margin-left: -$padding__page__small;
            }
        }
    }
}

$padding__page__half: $padding__page / 2;
$padding__page__small__half: $padding__page__small / 2;
@mixin responsivePaddingHalf($dir: all, $reverse: false) {
    @if $reverse==false {
        @if $dir=='all' {
            padding: $padding__page__half;
            @include gt-md {
                padding: $padding__page__small__half;
            }
        }
        @else if $dir=='top' {
            padding-top: $padding__page__half;
            @include gt-md {
                padding-top: $padding__page__small__half;
            }
        }
        @else if $dir=='right' {
            padding-right: $padding__page__half;
            @include gt-md {
                padding-right: $padding__page__small__half;
            }
        }
        @else if $dir=='bottom' {
            padding-bottom: $padding__page__half;
            @include gt-md {
                padding-bottom: $padding__page__small__half;
            }
        }
        @else if $dir=='left' {
            padding-left: $padding__page__half;
            @include gt-md {
                padding-left: $padding__page__small__half;
            }
        }
    }
    @else if $reverse==true {
        @if $dir=='all' {
            margin: -$padding__page__half;
            @include gt-md {
                margin: -$padding__page__small__half;
            }
        }
        @else if $dir=='top' {
            margin-top: -$padding__page__half;
            @include gt-md {
                margin-top: -$padding__page__small__half;
            }
        }
        @else if $dir=='right' {
            margin-right: -$padding__page__half;
            @include gt-md {
                margin-right: -$padding__page__small__half;
            }
        }
        @else if $dir=='bottom' {
            margin-bottom: -$padding__page__half;
            @include gt-md {
                margin-bottom: -$padding__page__small__half;
            }
        }
        @else if $dir=='left' {
            margin-left: -$padding__page__half;
            @include gt-md {
                margin-left: -$padding__page__small__half;
            }
        }
    }
}

$color__border: #e0e0e0;
$color__text-darker: #333;
$color__text-light: #999;
.card {
    background: white;
    border-radius: 2px;
    .selectOptions {
        .list {
            padding-top: 10px;
            padding-left: 16px;
        }
        .delico {
            margin: 5px 0;
            .mat-icon {
                color: red !important;
            }
        }
    }
    .headervariant {
        .datatable-header-cell-label {
            padding-left: 2.5em !important;
        }
    }
    .headerspec {
        .datatable-header-cell-label {
            padding-left: 1.5em !important;
        }
    }
    .variants {
        padding-left: 0.2em;
        rl-tag-input-item {
            margin-bottom: 3px;
        }
    }
    .header {
        // min-height: 64px;
        padding-left: 16px;
        padding-right: 16px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        align-content: center;
        border-bottom: 1px solid #e0e0e0;
        font-size: 20px;
        &.combination {
            border-bottom: unset;
        }
        .title {
            // .name {
            // }
            .extra {
                font-size: 12px;
                color: #888;
            }
        } // .icon {
        // }
    }
    .footer {
        padding: 8px 16px;
        border-top: 1px solid #e0e0e0;
        button+button {
            margin-left: 8px;
        }
    }
    &.border {
        border: 1px solid #e0e0e0;
    }
    &.space {
        .header {
            @include responsivePadding(left);
            @include responsivePaddingHalf(right);
        }
        .content {
            @include responsivePadding();
        }
        .footer {
            padding: 8px;
            @include responsivePadding(left);
        }
    }
    &.no-padding-content {
        .content {
            padding: 0px;
        }
    }
    &.alternative {
        background: white;
        overflow: hidden;
        border: none;
        &.padding {
            @include responsivePadding();
        } // @include responsivePadding();
        &.border {
            @include cardBorder;
        }
        .header {
            min-height: inherit;
            padding: 0;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            align-content: center;
            border-bottom: none;
            .title {
                font-size: 18px;
            }
            .sub-title {
                font-size: 14px;
                color: $color__text-light;
            }
        }
    }
}

.mgleft {
    padding-left: 10px;
}

#draglong {
    .img-ul-drag-box-msg {
        width: 78%;
    }
}

#colors-tag {
    padding: 8px 0 6px 7px;
    .ng2-tag-input-field {
        padding: 0 4px;
        font-size: 14px;
    }
}