@import "../../styles/modules/importAll";

.ToggleInput {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    $small-height: 14px;

    h4 {
        font-size: 1em;
    }

    .label {
        flex: 1;
    }
    &.default .label {
        line-height: 1.6rem;
        padding-right: 0.5rem;
    }
    &.small .label {
        line-height: $small-height;
    }

    .toggle {
        display: flex;
        position: relative;
        flex-direction: row;
        background-color: $midGrey;
        border-radius: 3px;
        transition: background-color 0.25s ease-out;
        &.active {
            background-color: $anchorLinkLight;
        }
    }
    &.default .toggle {
        height: 1.6rem;
        width: 3rem;
    }
    &.small .toggle {
        height: $small-height;
        width: $small-height * 2;
    }

    .indicator {
        background-color: white;
        display: block;
        position: absolute;
        top: calc(50% - 0.6rem);
        transition: left 0.1s ease-out;
    }
    &.default .indicator {
        height: 1.2rem;
        width: 1.2rem;
        border-radius: 0.6rem;
        left: 0.2rem;
        top: 0.2rem;
    }
    &.small .indicator {
        height: 10px;
        width: 10px;
        border-radius: 50%;
        left: 2px;
        top: 2px;
    }

    &.default .toggle.active .indicator {
        left: 1.6rem;
    }

    &.small .toggle.active .indicator {
        left: unset;
        right: 2px;
    }
}

