@import '~tc-ui/src/styles/tc-includes';
@import '../Wizard/screen-size.scss';

:global {
  .RegistrationScreen {
    .container {
      width: 70%;

      @include tablet {
        width: 80%;
      }

      @include mobile {
        width: 90%;
      }

      .title {
        color: #1E1E1F;
        font-size: 32px;
        font-weight: 300;
        line-height: 35px;
        margin-top: 50px;

        @include mobile {
          font-size: 24px;
        }
      }

      .sub-title {
        color: #85807C;
        font-size: 12px;
        font-weight: 400;
        line-height: 20px;
        margin-top: 15px;
        text-transform: uppercase;
      }

      .server-error-message {
        margin: 0;
        padding: 10px;
        background: #FFF4F4;
        border: 1px solid #FFD4D1;
        font-style: italic;
        font-size: 13px;
        line-height: 15px;
        color: #F22F24;
        margin-top: 10px;
        margin-bottom: -20px;
      }

      .form {
        width: 100%;
        margin-top: 50px;

        .country-input {
          margin-bottom: 10px;
        }

        .input-container {
          width: 100%;
          position: relative;

          .check-success-icon {
            position: absolute;
            top: 40px;
            right: -20px;
            width: 10px;
            height: 10px;

            @include mobile {
              display: none;
            }
          }
        }

        .checkbox-group-item {
          .tc-checkbox {
            input {
              display: none;
            }
            label {
              position: relative;
              cursor: pointer;
              display: inline-block;
              width: 20px;
              height: 20px;
              top: 0;
              left: 0;
              border-radius: 2px;
              box-shadow: none;
              border: 1px solid lightgray;
              background: #fafafb;
              transition: all .150s ease-in-out;
            }
            label::after {
              opacity: 0;
              content: '';
              position: absolute;
              width: 13px;
              height: 7px;
              background: transparent;
              top: 4px;
              left: 3px;
              border: 3px solid #0681ff;
              border-top: none;
              border-right: none;
              transform: rotate(-45deg);
              transition: all .150s ease-in-out;
            }
          }

          &.checkbox-item-checked {
            .tc-checkbox {
              label {
                background: #0681ff;
                border-color: #0681ff;
              }

              label::after {
                opacity: 1;
                border-color: #ffffff;
              }
            }

          }
        }

        .tiled-group-row {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: left;
          flex-wrap: wrap;

          .tiled-group-item-container {
            min-width: 23%;

            @include mobile-tablet {
              min-width: 25%;
            }

            a,
            span{
              width: auto;
              height: auto;
            }

            .tiled-group-item {
              background: transparent;
              border: none;
              margin-left: 0;

              @include mobile-tablet {
                margin-right: 0;
              }
            }

            .tiled-group-item.active {
              &::before {
                content: none;
              }
              &::after {
                content: none;
              }
            }

            .CheckRadioIcon {
              margin-top: 5px;
            }

            .title {
              color: #151516;
              font-size: 13px;
              font-weight: 500;
              line-height: 30px;
              margin-left: 25px;
              margin-top: 0;

              @include mobile-tablet {
                font-size: 12px;
                margin-right: 0;
              }
            }

            .icon {
              margin: auto;
            }
          }
        }

        .checkbox-group-item {
          margin-top: 10px;
          width: 100%;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: flex-start;
          margin-right: 0;

          .error-message {
            display: none;
          }

          .tc-checkbox {
            padding: 0;
            margin: 0;

            &.error {
              background: #FFF4F4;
              border: 1px solid #FFD4D1;
              font-style: italic;
              font-size: 13px;
              line-height: 15px;
              color: #F22F24;
              display: flex;
              align-items: center;
              justify-content: center;
            }

            input {
              @supports (-moz-appearance:none) {
                width: 20px;
                height: 20px;
              }
            }

            label {
              margin: auto;
            }
          }
        }

        .tc-checkbox-label {
          color: #151516;
          font-size: 13px;
          font-weight: 400;
          line-height: 20px;
          margin: 0 0 0 10px;
        }

        .space {
          width: 100%;
          height: 30px;
        }

        .tc-label {
          width: 100%;
          color: #A0958C;
          font-size: 12px;
          font-weight: 400;
          line-height: 15px;
          text-align: left;
          margin-top: 10px;
          text-transform: none;
        }

        .tc-file-field__inputs {
          height: 30px;
          margin-top: 5px;
        }

        .error-message {
          margin: 0;
          padding: 10px;
          background: #FFF4F4;
          border: 1px solid #FFD4D1;
          font-style: italic;
          font-size: 13px;
          line-height: 15px;
          color: #F22F24;
        }

        .tc-btn {
          width: 111px;
          height: 40px;
        }

        .by-clicking-continue {
          margin-top: 20px;
          color: #A69C94;
          font-size: 11px;
          font-weight: 400;
          line-height: 20px;
          text-align: center;

          a {
            color: $tc-dark-blue;
          }
        }
      }

      .requiredMarker {
        color: $tc-red-100;
      }

      .form .warningText {
        @extend .error-message;
        background-color: $tc-red-10;
        border: 1px solid $tc-orange-30;
        color: $tc-orange-70;
        margin-top: 6px;
        width: 100%;
        margin-bottom: 6px;
      }

      .valid-phone+.warningText {
        margin-top: -4px;
      }
    }
  }
}