@import 'variables';
@import 'functions';

// VARIABLES
$dangerBoxBackground: #fff;
$dangerBoxColor: #000;
$dangerBoxSubColor: #898989;
$dangerDecorColor: #ed1c24;
$dangerBoxItemBorderColor: #f1f1f1;

h3 {
  &.twofas-danger-zone-header {
    color: $dangerDecorColor;
    font-size: px-to-rem(20);
    font-weight: 700;
    line-height: px-to-rem(24);
    margin-bottom: 0;
    max-height: 0;
    overflow: hidden;

    &.twofas-show {
      margin-bottom: 23px;
      max-height: 9999px;
    }
  }
}

.twofas-danger-zone-box {
  background: $dangerBoxBackground;
  border: 0;
  border-radius: 4px;
  box-sizing: border-box;
  max-height: 0;
  overflow: hidden;

  &.twofas-show {
    border: 1px solid $dangerDecorColor;
    max-height: 9999px;
  }

  &-item {
    border-bottom: 1px solid $dangerBoxItemBorderColor;
    padding: 44px 41px;
    text-align: left;

    @media all and (max-width: 600px) {
      padding: 20px;
      text-align: center;
    }

    &:last-of-type {
      border-bottom: 0;
    }

    &-switch {
      align-items: center;
      display: flex;
      flex-direction: row;
      margin-top: 24px;

      @media all and (max-width: 600px) {
        display: inline-flex;
        margin-left: auto;
        margin-right: auto;
      }

      > label {
        color: $dangerBoxColor;
        font-size: px-to-rem(14);
        font-weight: 400;
        line-height: px-to-rem(17);
        margin-right: 21px;
      }
    }

    &-remove-config {
      a {
        -moz-appearance: none;
        -webkit-appearance: none;
        box-shadow: none;
        color: $dangerDecorColor;
        display: inline-block;
        font-size: px-to-rem(12);
        font-weight: 500;
        line-height: px-to-rem(17);
        margin-top: 19px;
        outline: none !important;

        &:hover {
          color: darken($dangerDecorColor, 5%);
        }

        &:focus,
        &:active {
          box-shadow: none;
          color: $dangerDecorColor;
          outline: none !important;
        }
      }
    }

    h4 {
      color: $dangerBoxColor;
      font-size: px-to-rem(16);
      font-weight: 600;
      line-height: px-to-rem(20);
      margin-bottom: 6px;
      margin-top: 0;
      text-align: left;

      @media all and (max-width: 600px) {
        text-align: center;
      }
    }

    h5 {
      color: $dangerBoxSubColor;
      font-size: px-to-rem(12);
      font-weight: 400;
      line-height: px-to-rem(15);
      margin-bottom: 0;
      margin-top: 0;
    }
  }
}