/*
* @Author: Timi Wahalahti
* @Date:   2018-04-05 16:24:26
* @Last Modified by:   Timi Wahalahti
* @Last Modified time: 2019-07-01 15:05:13
*/

@import 'jeet/scss/index';
@import 'selectize.js/dist/css/selectize';

ul#adminmenu {
	li#menu-posts-crmservice_form {

    .dashicons-before {
      img {
        width: auto;
        max-height: 24px;
        padding: 0;
        margin-top: 5px;
      }
    }

		ul.wp-submenu {
			li.wp-first-item {
				display: none;
			}
		}
	}
}

.crmservice-metabox-settings-wrap,
.crmservice-metabox-connections-wrap,
.crmservice-metabox-static-fields-wrap {
  .select-wrapper {
    position: relative;

    &::before {
      content: "\f347";
      font-family: dashicons;
      position: absolute;
      top: 0;
      right: 0;
      width: 10%;
      height: 100%;
      text-align: center;
      font-size: 20px;
      line-height: 35px;
      color: #ddd;
      pointer-events: none;
    }

    &:hover::before {
      color:  #aaa;
    }

    select {
      height: 35px;
      background-color: #fff;
      color: #444;
      border: 1px solid #ddd;
      box-shadow: 0 5px 10px rgba(0,0,0,.025);
      -webkit-appearance: button;
      appearance: button;
      outline: none;
    }
  }
}

.crmservice-metabox-settings-wrap {
	margin-bottom: 40px;

	.row {
		@include clearfix;

		.col {
			@include column(1/2);

			p.label {
        color: #222;
				font-size: 1.3em;
				font-weight: 600;
			}

			select {
				width: 100%;
			}
		}
	}
}

.crmservice-metabox-connections-wrap,
.crmservice-metabox-static-fields-wrap {
  h3 {
    color: #222;
    margin-bottom: 0;
    padding-bottom: 0;
  }

	.row {
		@include clearfix;

		&.row-head {
      border-bottom: 1px solid #ddd;
      padding: 0 15px;

			p {
				font-size: 1.15em;
        font-weight: 500;
			}
		}

		&.row-field {
			//border-bottom: 1px solid #ddd;
			padding: 15px;

      &:nth-child(even) {
        background-color: #fbfbfb;
      }

      &:last-child {
        border-bottom: 1px solid #ddd;
      }

			p {
				margin: 0;
				margin-top: 7px;

				&.select-options,
        &.uitype-user-relation {
					display: none; // do not display on default
					color: grey;
					font-weight: 600;

					span {
						font-weight: 400;
					}
				}

        &.uitype-user-relation {
          font-weight: 400;
        }
			}

			select,
      input {
				margin: 0;
				width: 100%;
        height: 35px;
			}
    }

		.col {
			@include column(1/2);
		}
	}
}

.crmservice-metabox-static-fields-wrap {
  margin-top: 40px;

  .row {
    &.row-field {
      .col-value {
        position: relative;

        button.delete {
          border: none;
          background: transparent;
          margin: 0;
          padding: 0;
          position: absolute;
          color: #ddd;
          top: 0;
          right: 0;
          width: 10%;
          height: 100%;
          text-align: center;
          font-size: 20px;
          line-height: 35px;
          cursor: pointer;

          span {
            height: 100%;
            font-size: 20px;
            line-height: 35px;
          }

          &:hover {
            span {
              color: #E53935;
            }
          }
        }
      }
    }

    &.row-footer {
      margin-top: 15px;
    }
  }
}

.crmservice-settings {
	svg {
		path.green-part {
    	fill: #3fc92a;
    }
	}

	p {
		&.clear-cache {
			margin-top: -10px;
			margin-bottom: 20px;
		}

		&.reset {
			a {
				color: grey;

				&:hover,
				&:focus {
					color: #00a0d2;
				}
			}
		}
	}
}

body.post-type-crmservice_form {
	table.wp-list-table.posts {
		th.column-status,
		td.column-status {
			width: 15px;
		}

		tr.type-crmservice_form {
			td.column-status {
				span.status {
					display: block;
					height: 15px;
					width: 15px;
					border-radius: 15px;
					background-color: #46b450;

					&.status-error {
						background-color: #dc3232;
					}

					&.status-warn {
						background-color: #ffb900;
					}
				}
			}
		}
	}
}

.crmservice-onboarding,
.notice.crmservice-onboarding,
.notice.crmservice-onboarding.is-dismissible {
  margin-top: 10px;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 20px;
  width: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  display: block;
  overflow: hidden;

  .top-bar {
    background: #3fc92a;
    overflow: hidden;
    height: 70px;
    width: 100%;
    display: block;

    p {
      font-size: 17px;
      top: 14px;
      position: relative;
      color: #fff;

      @media(max-width: 1400px) {
        font-size: 15px;
      }
    }

    svg {
      float: left;
      margin-top: 10px;
      margin-bottom: 10px;
      margin-left: 30px;
      margin-right: 30px;

      path, g {
      	fill: #fff;
      }
    }
  }

  .steps {
    overflow: hidden;

    .step {
      padding-top: 30px;
      padding-left: 30px;
      padding-right: 30px;
      padding-bottom: 10px;
      display: block;
      overflow: hidden;

      .icon {
        @include span(1/5);

        svg {
          width: 75%;
          height: auto;
          max-height: 44px;

          path,
          rect {
		      	fill: #3fc92a;
		      }

          polyline,
          line {
            stroke: #3fc92a;
          }
        }
      }

      .content {
        @include span(4/5);
      }

      h3 {
        margin-top: 0;
      }

      a.button {
        background: transparent;
        box-shadow: none;
        padding: 7px 20px;
        border: 2px solid #3fc92a;
        height: auto;
        color: #3fc92a;
        border-radius: 30px;
        margin-top: 10px;
        font-weight: 700;

        &:hover {
          background: #3fc92a;
          color: #fff;
        }
      }
    }

    ol {
      margin: 0;
      padding: 0;
      overflow: hidden;

      li {
        @include span(1/3);
        counter-increment: stepnumbers;
        padding: 0;
        list-style: none;
        overflow: hidden;

        @media(max-width: 1100px) {
          @include stack();
        }

        h3 {
          &:before {
            content: counter(stepnumbers) '. ';
            font-weight: bold;
            color: #3fc92a;
          }
        }
      }
    }
  }
}