@import "../../themes/liberty.globals";
@import "fab-button.vars";

// Floating Action Buttons
// --------------------------------------------------

:host {
    --ripple-color: currentColor;
    --border-radius: #{$fab-border-radius};
    --border-width: 0;
    --border-style: none;
    --border-color: initial;
    --background: #{$fab-background-color};
    --background-activated: var(--background);
    --background-focused: var(--background-activated);
    --color: #{$fab-text-color};
    --color-activated: #{$fab-text-color};
    --color-focused: var(--color-activated);
    --box-shadow: #{$fab-box-shadow};
    --box-shadow-activated: #{$fab-box-shadow-activated};
    --box-shadow-selected: #{$fab-box-shadow-selected};
    --box-shadow-focused: #{$fab-box-shadow-focus-hover};
    --transition: #{
    box-shadow 280ms cubic-bezier(.4, 0, .2, 1),
    background-color 280ms cubic-bezier(.4, 0, .2, 1),
    color 280ms cubic-bezier(.4, 0, .2, 1),
    opacity 15ms linear 30ms,
    transform 270ms cubic-bezier(0, 0, .2, 1) 0ms
  };
    /**
     * @prop --background: Background of the button
     * @prop --background-activated: Background of the button when activated
     * @prop --background-focused: Background of the button when focused
     *
     * @prop --color: Text color of the button
     * @prop --color-activated: Text color of the button when activated
     * @prop --color-focused: Text color of the button when focused
     *
     * @prop --transition: Transition of the button
     *
     * @prop --border-radius: Border radius of the button
     * @prop --border-width: Border width of the button
     * @prop --border-style: Border style of the button
     * @prop --border-color: Border color of the button
     *
     * @prop --ripple-color: Color of the button ripple effect
     *
     * @prop --box-shadow: Box shadow of the button
     * @prop --box-shadow-selected: Box shadow of the button when activated
     * @prop --box-shadow-focused: Box shadow of the button when focused
     *
     * @prop --padding-top: Padding top of the button
     * @prop --padding-end: Padding end of the button
     * @prop --padding-bottom: Padding bottom of the button
     * @prop --padding-start: Padding start of the button
     */
    @include margin(0);
    display: block;

    width: #{$fab-size};
    height: #{$fab-size};

    font-size: 14px;

    text-align: center;
    text-overflow: ellipsis;
    text-transform: none;

    white-space: nowrap;
    font-kerning: none;

}


// FAB with Color
// --------------------------------------------------

// Default Button with Color
:host(.lu-color) .button-native {
    background: #{current-color(base)};
    color: #{current-color(contrast)};
}

// Focused/Activated Button with Color
:host(.lu-color.focused) .button-native,
:host(.lu-color.activated) .button-native {
    background: #{current-color(tint)};
    color: #{current-color(contrast)};
}

.button-native {
    @include border-radius(var(--border-radius));
    @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
    @include text-inherit();

    display: block;
    position: relative;

    width: 100%;
    height: 100%;

    transform: var(--transform);

    transition: var(--transition);

    border-width: var(--border-width);
    border-style: var(--border-style);
    border-color: var(--border-color);

    outline: none;

    background: var(--background);

    background-clip: padding-box;
    color: var(--color);

    box-shadow: var(--box-shadow);
    contain: strict;
    cursor: pointer;
    overflow: hidden;
    z-index: 0;
    appearance: none;
}

.button-native[disabled] {
    cursor: default;
    opacity: .5;
    pointer-events: none;
}

::slotted(lu-icon),
.close-icon {
    font-size: $fab-icon-font-size;

    line-height: 1;
}

.button-inner {
    @include position(0, 0, null, 0);

    display: flex;
    position: absolute;

    flex-flow: row nowrap;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;

    height: 100%;

    transition: all ease-in-out 300ms;
    transition-property: transform, opacity;
}


// FAB States
// --------------------------------------------------

:host(.activated) .button-native {
    background: var(--background-activated);
    color: var(--color-activated);
}

:host(.activated) {
    --box-shadow: #{$fab-box-shadow-activated};
}

// Focused Button
:host(.focused) .button-native {
    background: var(--background-focused);
    color: var(--color-focused);

    box-shadow: var(--box-shadow-focused);
}

.button-native:hover {
    background: var(--background-focused);
    color: var(--color-focused);

    box-shadow: var(--box-shadow-focused);
}


// Activated / Pressed Button
:host(.fab-button-selected) .button-native {

    box-shadow: var(--box-shadow-selected);
}

// Disabled Button
:host(.fab-button-disabled) {
    pointer-events: none;
}

.button-native[disabled] {
    cursor: default;
    opacity: .5;
    pointer-events: none;
}

// FAB Content
// --------------------------------------------------

::slotted(lu-icon) {
    line-height: 1;
}


// FAB small (mini
// --------------------------------------------------

:host(.fab-button-small) {
    @include margin(($fab-size - $fab-small-size) / 2);

    width: #{$fab-small-size};
    height: #{$fab-small-size};
}

:host(.fab-button-small) ::slotted(lu-icon) {
    font-size: 18px;
}

:host(.fab-button-small) .close-icon {
    font-size: 18px;
}

// FAB Close Icon
// --------------------------------------------------

.close-icon {
    @include position(0, 0, null, 0);

    display: flex;
    position: absolute;

    align-items: center;
    justify-content: center;

    height: 100%;

    transform: scale(.4) rotateZ(-45deg);

    transition: all ease-in-out 300ms;
    transition-property: transform, opacity;

    opacity: 0;
}

// FAB Animation
// --------------------------------------------------

:host(.fab-button-close-active) .close-icon {
    transform: scale(1) rotateZ(0deg);

    opacity: 1;
}

:host(.fab-button-close-active) .button-inner {
    transform: scale(.4) rotateZ(45deg);

    opacity: 0;
}

// FAB buttons in a list
// --------------------------------------------------

:host(.fab-button-in-list) {
    --color: #{$fab-list-button-text-color};
    --color-activated: #{$fab-list-button-text-color};
    --color-focused: var(--color-activated);
    --background: #{$fab-list-button-background-color};
    --background-activated: #{$fab-list-button-background-color-activated};
    --background-focused: var(--background-activated);
}

:host(.fab-button-in-list) ::slotted(lu-icon) {
    font-size: $fab-list-button-icon-font-size;
}