md-checkbox {
  margin: 10px 10px 10px 20px;
  padding: 0px 0px 0px 30px;

  .md-container {
    width: 30px;
    height: 30px;

    &:after {
      top: -10px;
      right: -20px;
      bottom: -10px;
      left: -20px;
    }

    .md-icon {
      background-color: $checkbox-background-disabled;
      width: 30px;
      height: 30px;
      border: 0px;
    }
  }

  .md-label:not(:empty) {
    margin-left: 20px;
  }

  &:not([disbaled]) {

    .md-container {

      .md-icon {
        background-color: $checkbox-background;
      }
    }

    &.md-checked {

      .md-container {

        .md-icon {
          background-color: $checkbox-background-active;
        }
      }
    }
  }

  &:hover {

    .md-container {

      .md-icon {
        background-color: $checkbox-background-hover;
      }
    }
  }

  &.md-checked {

    .md-container {

      .md-icon {
        background-color: $checkbox-background-active;

        &:after {
          left: 12px;
          top: 7px;
          width: 7px;
          height: 14px;
          border-width: 3px;
        }
      }
    }
  }
}

table md-checkbox {
  margin: 0px 10px 0px 20px;
}

md-input-container.md-default-theme.checkbox-container {

  md-checkbox {
    color: $inverse-font-color;
    padding-left: 40px;

    &:hover {

      .md-container {
        height: 30px;
        width: 30px;

        .md-icon {
          background-color: $checkbox-background-hover;
        }
      }
    }


    &.md-checked {

      .md-container {

        .md-icon {
          background-color: $checkbox-background-active;
          width: 30px;
          height: 30px;

          &:after {
            left: 9px;
            top: 2px;
            width: 12px;
            height: 21px;
            border-width: 5px;
          }
        }
      }
    }

    .md-container {
      height: 30px;
      width: 30px;

      .md-icon {
        background-color: $checkbox-background;
        width: 30px;
        height: 30px;
        border: 0;
        border-radius: 0;
      }
    }

    .md-label {
      color: $font-color;

      span {
        margin-left: 0;
      }
    }
  }
}
