/**
 * All of the CSS for your admin-specific functionality should be
 * included in this file.
 */
@import "vars";
@import "mixins";

#EMS-settings-page {

  .EMS__wrap {

    &__content {

      display: flex;
      min-height: 100px;

      .content__main {
        // here is magic 🦄‍🏳️‍🌈‍ Voodoo People Magic People
        width: calc(100% - 550px);
        flex: calc(100% - 550px);
        float: left;
        //padding-top: 30px;

        h4 {
          margin-bottom: 10px;
        }

        .content__main__notice,
        .content__main__not-founded {
          margin-top: 0;
        }

        .content__main__warning {
        }

        .server-config {
          border: 1px solid rgba($default, .4);
          background-color: rgba($default, .1);
          margin: 10px 0 30px;
          width: 100%;
          overflow-x: auto;


          pre {
            margin: 0;
            padding: 0 15px;
            background-color: transparent;
            code {
              background-color: transparent;
              padding: 0;
              font-family: monospace;

            }
          }
        }

      }

      .content__sidebar {
        padding: 30px 0 0 30px;

        flex: 350px;
        min-width: 350px;
        min-height: 100px;


        .ems-banner {
          background-color: $white;
          padding: 10px;
          margin: 0 0 30px;
          border: 1px solid #E5E5E5;
          position: relative;
          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
          overflow: hidden;

          &--rate-it {
            background: linear-gradient(to bottom, $blue 0%, $blue calc(50% + 20px), $deepsea calc(50% + 20px), $deepsea 100%);

            a {
              text-decoration: none;
              min-height: 100px;
              display: block;
              text-align: center;
              @include transit();

              .reatlat_promote_title {
                display: block;
                color: $sunflower;
                padding: 10px 0 0;
                margin: auto;
              }

              img {
                margin: auto;
                max-width: 130px;
                @include transit();
              }

              &:hover img {
                transform: scale(1.15);
              }
            }
          }

          &--utm-builder,
          &--langflag {
            padding: 0;

            a {
              display: block;

              img {
                width: 100%;
                height: auto;
                display: block;
              }
            }
          }

          &--promo {

          }

          &--buy-me-coffee {
            background: $sunflower;

            a {
              display: block;
              text-align: center;
              padding: 10px;
              @include transit();

              &:hover {
                transform: scale(1.15);
              }

              img {
                margin: auto;
                max-width: 300px;
                width: 100%;
              }
            }
          }

          &--author {
            img {
              float: left;
              width: 80px;
              height: 80px;
              margin-right: 15px;
            }

            h3 {
              padding-top: 5px;
              margin-bottom: 0;
            }

            h4 {
              margin: 0;
            }
          }

          &--techstack {
            text-align: center;

            img {
              width: 20%;
              padding: 0 3%;
            }
          }
        }
      }

    }

  }


  // helpers
  .green {
    color: $green !important;
  }
}