////////////////////////////////////////////////////////////////////////////////
//
//  Licensed to the Apache Software Foundation (ASF) under one or more
//  contributor license agreements.  See the NOTICE file distributed with
//  this work for additional information regarding copyright ownership.
//  The ASF licenses this file to You 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.
//
////////////////////////////////////////////////////////////////////////////////

// Jewel Card

// Card variables
$card-padding: 20px

.jewel.card
    font:
        size: $font-size
        weight: 400
    
    @if $dark
        background: lighten($background-color, 10%)
    @else
        background: lighten($background-color, 10%)
    @if $flat
        border: 1px solid transparent
    @else
        border: 1px solid desaturate(lighten($primary-color, 26%), 70%)
    border-radius: $border-radius

    &.simple
        padding: 20px

    .card-header
        @if $flat
            border-bottom: 1px solid transparent
        @else
            border-bottom: 1px solid desaturate(lighten($primary-color, 26%), 70%)
        padding: 12px 20px

    .card-title
        font-size: 1.5em
        margin: 0.408rem 0rem
        letter-spacing: 0.0125em

    .card-expanded-content
        // margin: -$card-padding -$card-padding $card-padding/2 -$card-padding

    .card-primary-content
        padding: $card-padding

    .card-actions
        @if $flat
            border-top: 1px solid transparent
        @else
            border-top: 1px solid desaturate(lighten($primary-color, 26%), 70%)
        padding: 18px 20px

j|Card
    gap: 3

j|CardHeader
    gap: 3

j|CardPrimaryContent
    gap: 3

j|CardActions
    gap: 3