//  ---------------------------------------------------------------------------
//
//  Collapsible element
//
//  ---------------------------------------------------------------------------

//  ---------------------------------------------------------------------------
//
//  Collapse/expand pattern
//
//  ---------------------------------------------------------------------------

// scss-lint:disable ImportantRule
@mixin dc--is-collapsed {
    height: 0 !important;
}

@mixin dc--is-expanded {
    height: auto !important;
}

//  ---------------------------------------------------------------------------
//
//  Show/hide pattern
//
//  ---------------------------------------------------------------------------

@mixin dc--is-hidden {
    display: none !important;
}

@mixin dc--is-shown {
    display: block !important;
}

//  ---------------------------------------------------------------------------
//
//  Visible/invisible pattern
//
//  ---------------------------------------------------------------------------

@mixin dc--is-invisible {
    opacity: 0;
}

@mixin dc--is-visible {
    opacity: 1;
}

//  ---------------------------------------------------------------------------
//
//  Block/inline pattern
//
//  ---------------------------------------------------------------------------

@mixin dc--is-inline {
    display: inline-block !important;
}

//  ---------------------------------------------------------------------------
//
//  Fixed elements
//
//  ---------------------------------------------------------------------------

@mixin dc--is-fixed {
    position: fixed !important;
}

//  ---------------------------------------------------------------------------
//
//  Highlighted text
//
//  ---------------------------------------------------------------------------

@mixin dc--is-important {
    background: $dc-yellow60 !important;
}

//  ---------------------------------------------------------------------------
//
//  This class is for text elements that are not so important and
//	appear in a less intrusive way
//
//  ---------------------------------------------------------------------------

@mixin dc--less-important {
    color: $dc-gray50 !important;
}

//  ---------------------------------------------------------------------------
//
//  ISLANDS - used to add paddings to elements
//
//  ---------------------------------------------------------------------------

@mixin dc--island-50 {
    padding: $dc-space50;
}

@mixin dc--island-75 {
    padding: $dc-space75;
}

@mixin dc--island-100 {
    padding: $dc-space100;
}

//  = TEXT
//  ---------------------------------------------------------------------------

//  ---------------------------------------------------------------------------
//
//  Alignment Classes - left - center - right
//
//  ---------------------------------------------------------------------------

@mixin dc--text-left {
    text-align: left;
}

@mixin dc--text-center {
    text-align: center;
}

@mixin dc--text-right {
    text-align: right;
}

//  This class is for text elements that are not so important and
//	appear in a less intrusive way
//  ---------------------------------------------------------------------------
@mixin dc--text-less-important {
    color: $dc-gray60;
    font-size: $dc-font50;
    line-height: 1;
}

@mixin dc--text-small {
    font-size: $dc-font50;
    line-height: $dc-space125;
}

@mixin dc--text-success {
    color: $dc-green30;
}

@mixin dc--text-error {
    color: $dc-red40;
}

@mixin dc--text-truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

@mixin dc--no-wrap {
    white-space: nowrap;
}

@keyframes dc--spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(359deg);
    }
}

@mixin dc-utilities-selectors {

    .dc--is-collapsed {
        @include dc--is-collapsed;
    }

    .dc--is-expanded {
        @include dc--is-expanded;
    }

    .dc--is-hidden {
        @include dc--is-hidden;
    }

    .dc--is-shown {
        @include dc--is-shown;
    }

    .dc--is-invisible {
        @include dc--is-invisible;
    }

    .dc--is-visible {
        @include dc--is-visible;
    }

    .dc--is-inline {
        @include dc--is-inline;
    }

    .dc--is-fixed {
        @include dc--is-fixed;
    }

    .dc--is-important {
        @include dc--is-important;
    }

    .dc--less-important {
        @include dc--less-important;
    }

    .dc--island-50 {
        @include dc--island-50;
    }

    .dc--island-75 {
        @include dc--island-75;
    }

    .dc--island-100 {
        @include dc--island-100;
    }

    .dc--text-small {
        @include dc--text-small;
    }

    .dc--text-less-important {
        @include dc--text-less-important;
    }

    .dc--text-success {
        @include dc--text-success;
    }

    .dc--text-error {
        @include dc--text-error;
    }

    .dc--text--left {
        @include dc--text-left;
    }

    .dc--text-center {
        @include dc--text-center;
    }

    .dc--text-right {
        @include dc--text-right;
    }

    .dc--text-truncate {
        @include dc--text-truncate;
    }

    .dc--no-wrap {
        @include dc--no-wrap;
    }
}