// mixins
@mixin button-base()
    @include typography(button)
    @include ripple-surface
    @include ripple-radius-bounded

    display: inline-flex
    position: relative
    height: $button-height
    border: none
    vertical-align: middle

    &:hover
        cursor: pointer

    &:disabled
        color: $mdc-button-disabled-ink-color
        cursor: default
        pointer-events: none

@include corner-icon("mail", top, left)


@mixin inline-animation($duration)
    $name: inline-#{unique-id()}

    @keyframes #{$name}
        @content

        animation-name: $name
        animation-duration: $duration
        animation-iteration-count: infinite


.pulse
    @include inline-animation(2s)
      from
          background-color: yellow
      to
          background-color: red


// variables

$base-color: #c6538c
$border-dark: rgba($base-color, 0.88)

.alert
    border: 1px solid $border-dark

@use 'library' with ($black: #222, $border-radius: 0.1rem)

// parent selectors

.accordion
    max-width: 600px
    margin: 4rem auto
    width: 90%
    font-family: "Raleway", sans-serif
    background: #f4f4f4

    &__copy
        display: none
        padding: 1rem 1.5rem 2rem 1.5rem
        color: gray
        line-height: 1.6
        font-size: 14px
        font-weight: 500

        &--open
            display: block

@media (min-width: 320px)
    .inMedia
        color: hotpink;

        &__mod
            color: yellow;
