//
//  Base styles
//  ____________________________________________

//
//  Imports
//  --------------------------------------------

@import '_utils';

//
//  Common
//  --------------------------------------------

& when (@media-common = true) {
    .amcustombutton-button-container {
        & {
            display: flex;
            transition: opacity .2s, visibility .2s;
        }

        &.-align-left {
            justify-content: flex-start;
        }

        &.-align-center {
            justify-content: center;
        }

        &.-align-right {
            justify-content: flex-end;
        }

        &.-am-hidden {
            visibility: hidden;
            opacity: 0;
        }

        > .amcustombutton-button-element[id^='amcustombutton-'] {
            .amcustombutton-button-element;
        }
    }

    .amcustombutton-button-element {
        & {
            .am-word-break;

            position: relative;
            display: inline-flex;
            justify-content: center;
            overflow: hidden;
            box-sizing: border-box;
            outline: none;
            cursor: pointer;
        }

        .amcustombutton-text {
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        &:hover {
            text-decoration: none;
        }
    }

    // Override magento styles
    .footer.content .links a.amcustombutton-button-element {
        .amcustombutton-button-element;
    }
    // END Override magento styles
}

//
//  Mobile
//  -------------------------------------------

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    .amcustombutton-button-container.-no-mobile {
        display: none;
    }
}

//
//  Tablet
//  -------------------------------------------

& when (@media-common = true) {
    @media (max-width: @screen__l) and (min-width: @screen__m) {
        .amcustombutton-button-container.-no-tablet {
            display: none;
        }
    }
}

//
//  Desktop
//  -------------------------------------------

& when (@media-common = true) {
    @media screen and (min-width: (@screen__l + 1)) {
        .amcustombutton-button-container.-no-desktop {
            display: none;
        }
    }
}