@import '../../../styles/common.scss';

.container {
  height: 50px;
  width: 100px;
  .toggle {
    all: unset; // remove all button styling

    @include boxSizing;

    height: 50px;
    width: 100px;
    display: grid;
    grid-template-rows: 50px;
    grid-template-columns: 1fr 1fr;
    background-color: white;
    cursor: pointer;

    &:hover:enabled {
      transition: box-shadow 0.15s ease-in-out 0s;
      box-shadow: 0 0 0 2px
        var(--toggle-button-stroke-color, $toggle-button-stroke-color);
    }

    div {
      height: 100%;
      display: grid;
      grid-template-rows: 1fr;
      grid-template-columns: 1fr;
      place-items: center;

      svg {
        height: 100%;
        width: 100%;
      }

      &.off,
      &.on {
        background-color: white !important;

        svg {
          .svgText {
            fill: white;
          }
        }
      }
      &.off {
        border-top: 1px solid
          var(--toggle-button-stroke-color, $toggle-button-stroke-color);
        border-bottom: 1px solid
          var(--toggle-button-stroke-color, $toggle-button-stroke-color);
        border-left: 1px solid
          var(--toggle-button-stroke-color, $toggle-button-stroke-color);
      }
      &.on {
        border: 1px solid
          var(--toggle-button-stroke-color, $toggle-button-stroke-color);
      }
    }

    div.active.off {
      svg {
        .svgText {
          fill: var(
            --toggle-button-off-text-color,
            $toggle-button-off-text-color
          );
        }
      }
    }

    div.active.on {
      background-color: var(
        --toggle-button-on-bg-color,
        $toggle-button-on-bg-color
      ) !important;
    }

    &:disabled {
      cursor: default;
      opacity: 0.5;
    }

    &.hasConfirm {
      div {
        &.off,
        &.on {
          background-color: white !important;

          svg {
            .svgText {
              fill: white;
            }
          }
        }
        &.off {
          border-top: 1px solid var(--toggle-button-warning-border-color, $toggle-button-warning-border-color);
          border-bottom: 1px solid var(--toggle-button-warning-border-color, $toggle-button-warning-border-color);
          border-left: 1px solid var(--toggle-button-warning-border-color, $toggle-button-warning-border-color);
          transition: border $confirmation-transition linear;
        }
        &.on {
          border: 1px solid var(--toggle-button-warning-border-color, $toggle-button-warning-border-color);
          transition: border $confirmation-transition linear;
        }
      }

      div.active.off {
        svg {
          .svgText {
            fill: var(--toggle-button-warning-text-color, $toggle-button-warning-text-color);
            transition: fill $confirmation-transition linear;
          }
        }
      }

      div.active.on {
        background-color: var(--toggle-button-warning-bg-color, $toggle-button-warning-bg-color) !important;
        transition: background-color $confirmation-transition linear;
      }

      &:hover {
        box-shadow: 0 0 0 2px var(--toggle-button-warning-hover-shadow-color, $toggle-button-warning-hover-shadow-color);
        transition: box-shadow $confirmation-transition linear;
      }
    }
  }
}

.confirmDialog {
  @include confirmDialogFadeIn;
}
