/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 ~ Copyright 2021 Adobe
 ~
 ~ Licensed under the Apache License, Version 2.0 (the "License");
 ~ you may not use this file except in compliance with the License.
 ~ You may obtain a copy of the License at
 ~
 ~     http://www.apache.org/licenses/LICENSE-2.0
 ~
 ~ Unless required by applicable law or agreed to in writing, software
 ~ distributed under the License is distributed on an "AS IS" BASIS,
 ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 ~ See the License for the specific language governing permissions and
 ~ limitations under the License.
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.carousel__btn {
    background: transparent;
    border: 0;
    outline: none;
    cursor: pointer;
    height: 20px;
    position: absolute;
    top: 50%;
    width: 20px;
    border-color: dimgrey;
}

.carousel__btn:focus-visible {
    border-color: black;
}

.carousel__btn:disabled {
    border-color: lightgrey;
}

.carousel__btn--next {
    border-bottom: 8px solid;
    border-right: 8px solid;
    right: 0;
    -moz-transform: rotate(315deg);
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
}

.carousel__btn--prev {
    border-bottom: 8px solid;
    border-left: 8px solid;
    left: 0;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.carousel__card {
    float: left;
    text-align: center;
    width: 240px;
}

.carousel__cardscontainer {
    margin: auto;
    /*
     * the cardscontainer is within the cardsroot with overflow hidden.
     * in the default style with a card width of 240px the 12000px width
     * give enough space for 41 cards, this should be sufficient for all
     * practical cases.
     */
    width: 12000px;
    transition-property: margin-left, margin-right;
    transition-duration: 300ms;
    transition-timing-function: linear;
}

.carousel__cardsroot {
    overflow: hidden;
}

.carousel__container {
    position: relative;
    margin: 25px auto;
    width: 240px;
}

@media screen and (min-width: 790px) {
    .carousel__container {
        width: 720px;
    }
}

@media screen and (min-width: 1090px) {
    .carousel__container {
        width: 960px;
    }
}

@media screen and (min-width: 1380px) {
    .carousel__container {
        width: 1200px;
    }
}

@media screen and (min-width: 1650px) {
    .carousel__container {
        width: 1440px;
    }
}

.carousel__title {
    text-align: center;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 ~ Copyright 2022 Adobe
 ~
 ~ Licensed under the Apache License, Version 2.0 (the "License");
 ~ you may not use this file except in compliance with the License.
 ~ You may obtain a copy of the License at
 ~
 ~     http://www.apache.org/licenses/LICENSE-2.0
 ~
 ~ Unless required by applicable law or agreed to in writing, software
 ~ distributed under the License is distributed on an "AS IS" BASIS,
 ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 ~ See the License for the specific language governing permissions and
 ~ limitations under the License.
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

[dir='rtl'] .carousel__container {
    direction: rtl;
}

[dir='rtl'] .carousel__btn--prev {
    -moz-transform: rotate(225deg);
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
    right: 0;
    left: unset;
}

[dir='rtl'] .carousel__btn--next {
    -moz-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    left: 0;
    right: unset;
}