// ============================================================================
// Component
// Action
// ============================================================================


// Component Logic ------------------------------------------------------------



// Component Styling ----------------------------------------------------------
.c-action {
    @include content-show-interaction(link);

    display: block;
    margin-bottom: ms(0.75, rem);

    background: transparent;

    border: none;

    font-weight: $font-weight-medium;
    font-size: ms(1, em);
    text-align: left;
    text-decoration: none;

    // States
    &:hover {
        .icon {
            left: em(6);
        }
    }

    // Breakpoints
    @include mappy-bp(palm-medium) {
        display: flex;
        margin-bottom: 0;

        font-size: ms(0.7, em);
    }

    &__text {
        // Breakpoints
        @include mappy-bp(palm-medium) {
            order: 1;
        }
    }

    .icon {
        @include component-size(ms(0.75, rem), ms(0.75, rem), null);

        margin-right: rem(12);
        position: relative;
          left: 0; // Initial position to transition

        transition: left animation-duration(shorter) animation-ease(character);

        // Breakpoints
        @include mappy-bp(palm-medium) {
            @include component-size(ms(0.85, rem), ms(0.85, rem), null);

            margin-left: rem(10);

            order: 2;
        }
    }

    &--random {
        .icon {
            top: rem(5);

            // Breakpoints
            @include mappy-bp(palm-medium) {
                top: rem(2);
            }
        }
    }

    &--share {
        margin-right: ms(4, rem);

        .icon {
            top: rem(5);

            // Breakpoints
            @include mappy-bp(palm-medium) {
                top: rem(2);
            }
        }
    }

    &--what-is-this {
        .icon {
            top: rem(5);

            // Breakpoints
            @include mappy-bp(palm-medium) {
                display: flex;
                top: rem(1);
            }
        }
    }
}
