@import "../../themes/liberty.globals";

:host {
    display: inline-block;
}

.container {
    @include border-radius(2px);
    display: flex;

    border: 1px solid #686a6f;
}

/**
* @prop --lu-toggle-font-size: font size of toggle
* @prop --lu-toggle-check-icon-font-size: font size of toggle
* @prop --lu-toggle-font-family: font family of toggle

* @prop --lu-toggle-padding-top: font family of toggle
* @prop --lu-toggle-padding-start: font family of toggle
* @prop --lu-toggle-padding-bottom: font family of toggle
* @prop --lu-toggle-padding-end: font family of toggle
* @prop --lu-toggle-active-padding-start: font family of toggle
*/
.toggle {
    @include padding(var(--lu-toggle-padding-top, 0.563em), var(--lu-toggle-padding-end, 2em), var(--lu-toggle-padding-bottom, 0.563em), var(--lu-toggle-padding-start, 3em));
    position: relative;

    border-style: none;

    background-color: #ffffff;

    font-family: var(--lu-toggle-font-family, "Roboto", sans-serif);
    font-size: var(--lu-toggle-font-size, 16px);
}

button {
    @include margin(0);
}

.left-toggle {
    display: flex;

    align-items: center;

    justify-content: end;

    border-right: 1px solid #686a6f;
}

.right-toggle {
    display: flex;

    align-items: center;

    justify-content: end;

    border-left: none;
}

:host([data-start-active]) .left-toggle {
  @include padding-horizontal(var(--lu-toggle-active-padding-start, 3em), var(--lu-toggle-padding-end, 2em));

    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
}

:host([data-start-active]) .right-toggle {
    background-color: #c6c7c9;

    cursor: pointer;
}

:host([data-end-active]) .right-toggle {
    @include padding-horizontal(var(--lu-toggle-active-padding-start, 3em), var(--lu-toggle-padding-end, 2em));

    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
}

:host([data-end-active]) .left-toggle {
    background-color: #c6c7c9;

    cursor: pointer;
}

.toggle lu-icon {
    @include position-horizontal(0.5em);
    position: absolute;

    font-size: var(--lu-toggle-check-icon-font-size, 23px);
}