.time-clock {
  display: $tc-display;
  flex-direction: $tc-flex-direction;
  background-color: $tc-background-color;
  padding: $tc-padding;
  height: $tc-height;

  .alert {
    margin: $tc-alert-margin;
    // padding: 5px 15px;
    // background-color: $tc-clock-wrapper-actions-in-out-bg-color;
    // border-radius: 2px;

    &.error {
      // background: red;
      // color: white;
    }

    span {
      font-size: $tc-alert-span-font-size;
      line-height: $tc-alert-span-line-height;
    }

    p {
      // color: $tc-clock-wrapper-actions-in-out-color !important;
      color: white;
      font-size: 20px;
      letter-spacing: .5px;
    }
  }

  img {
    width: $tc-img-width;
    height: $tc-img-height;
  }

  h1, h2 {
    small {
      float: $tc-h1-small-meta-float;
      font-size: $tc-h1-small-meta-font-size;
      color: $tc-h1-small-meta-color;

      &#meta {}
    }
  }

  h1 {
    font-size: $tc-h1-font-size;
    line-height: $tc-h1-line-height;
  }

  h2 {
    font-size: $tc-h2-font-size;
    line-height: $tc-h2-line-height;
  }

  h3 {
    font-size: $tc-h3-font-size;
    line-height: $tc-h3-line-height;
    color: $tc-h3-color;
  }

  h1, h2, h4, h5, h6, p {
    color: $tc-h1-h2-h4-h5-h6-p-color;
  }

  form {
    &.time-clock-form {
      // background: green;
      position: absolute;
      margin-left: auto;
      margin-right: auto;
      left: 0;
      right: 0;
      bottom: 60px;

      button {
        &[type="submit"] {
          border: 0;
          clip: rect(0 0 0 0);
          height: 1px;
          margin: -1px;
          overflow: hidden;
          padding: 0;
          position: absolute;
          width: 1px;
        }
      }
    }
  }

  .clock-wrapper {
    // width: $tc-clock-wrapper-width;
    // margin: $tc-clock-wrapper-margin;
    // background-color: red;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 20px;
    right: 20px;
    top: 180px;

    .actions {
      position: relative;
      width: $tc-clock-wrapper-actions-width;
      float: $tc-clock-wrapper-actions-float;
      margin: $tc-clock-wrapper-actions-margin;

      .in,
      .out {
        background-color: $tc-clock-wrapper-actions-in-out-bg-color;
        border-radius: $tc-clock-wrapper-actions-in-out-border-radius;
        padding: $tc-clock-wrapper-actions-in-out-padding;
        text-align: $tc-clock-wrapper-actions-in-out-text-align;
        text-transform: $tc-clock-wrapper-actions-in-out-text-transform;
        color: $tc-clock-wrapper-actions-in-out-color;
        font-size: $tc-clock-wrapper-actions-in-out-font-size;
        font-weight: $tc-clock-wrapper-actions-in-out-font-weight;

        &.active {
          background: $tc-clock-wrapper-actions-in-out-active-bg-color;
          color: $tc-clock-wrapper-actions-in-out-active-color;
        }

        &.in {
          margin: $tc-clock-wrapper-actions-in-margin;
        }
      }
    }

    .log-info {
      position: $tc-clock-wrapper-log-info-position;
      float: $tc-clock-wrapper-log-info-float;

      h3 {
        small {
          font-size: 18px;
        }
      }
    }

    #current-time {
      height: 106px;
      line-height: 106px;
      // background: pink;

      position: $tc-clock-wrapper-current-time-position;
      float: $tc-clock-wrapper-current-time-float;
      padding: $tc-clock-wrapper-current-time-padding;
      color: $tc-clock-wrapper-current-time-color;
      text-align: $tc-clock-wrapper-current-time-text-align;
      font-size: $tc-clock-wrapper-current-time-font-size;
      // line-height: $tc-clock-wrapper-current-time-line-height;

      .a {
        position: $tc-clock-wrapper-current-time-am-pm-position;
        right: $tc-clock-wrapper-current-time-am-pm-right;
        font-size: $tc-clock-wrapper-current-time-am-pm-font-size;
      }

      .am {
        top: $tc-clock-wrapper-current-time-am-top;
      }

      .pm {
        bottom: $tc-clock-wrapper-current-time-pm-bottom;
      }
    }

    .error-icon {
      display: block;
      width: 106px;
      height: 106px;
      background-color: $tc-clock-wrapper-actions-in-out-bg-color;
      position: absolute;
      margin-left: auto;
      margin-right: auto;
      left: 0;
      right: 0;
      border-radius: 50%;

      svg {
        display: block;
        position: absolute;
        margin-top: auto;
        margin-right: auto;
        margin-bottom: auto;
        margin-left: auto;
        top: -5px;
        right: 0;
        bottom: 0;
        left: 0;
        width: 60px;
        height: 60px;
      }
    }
  }

  input {
    background-color: $tc-input-background-color;
    border: $tc-input-border;
    border-radius: $tc-input-border-radius;
    display: $tc-input-display;
    width: $tc-input-width;
    margin: $tc-input-margin;
    padding: $tc-input-padding;
    color: $tc-input-color;
    font-size: $tc-input-font-size;
    letter-spacing: $tc-input-letter-spacing;
    text-align: center;
    outline: $tc-input-outline;

    &::placeholder {
      color: $tc-input-placeholder-color;
    }
  }

  .alert-full {
    text-align: $tc-alert-text-align;
    margin-top: $tc-alert-margin-top;
  }

  p {
    &.ip {
      // background: red;
      position: absolute;
      margin-left: auto;
      margin-right: auto;
      left: 0;
      right: 0;
      bottom: 10px;
      text-align: $tc-p-ip-text-align;
    }
  }

  &.job-select {
    .job-cards {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      background-color: $tc-clock-wrapper-actions-in-out-bg-color;
      border-radius: 4px;
      margin: 10px 0 20px 0;
      padding: 20px 0 0 0;
      width: 100%;
      height: 225px;
      overflow-y: scroll;

      .card {
        flex-basis: calc(33% - 20px);
        box-sizing: border-box;
        margin: 0 0 20px 0;
        padding: 0;
        vertical-align: top;
        font-size: 22px;
        text-align: center;
      }
    }

    label {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      line-height: 24px;
      letter-spacing: .5px;
      color: white;
      border: 2px solid rgba(white, .15);
      box-sizing: border-box;
      height: 100%;
      width: 100%;
      padding: 30px 10px;
      cursor: pointer;

      &:hover,
      &:focus,
      &:active {
        border: 2px solid white;
      }
    }

    input {
      &[type="radio"] {
        opacity: 0;
        width: 0;
        height: 0;

        &:active ~ label {
          opacity: 1;
        }

        &:checked ~ label {
          opacity: 1;
          border: 2px solid white;
          background: white;
          color: $tc-background-color;
        }
      }

      &[type="submit"] {
        &.active {
          cursor: pointer;
          background-color: $fern;
          color: white;
        }
      }
    }
  }
}