/* // Environment Indicator at bottom right or left */
.admin {
  .dot {
    display: block;
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: var(--gray);
  }
  .dot.development {
    background: yellowgreen;
  }

  .dot.staging {
    background: gold;
  }

  .dot.production {
    background: tomato;
  }

  /* // debugger area  */
  .debugger {
    position: absolute;
    bottom: 0;
    left: 0; right: 0;
    background: var(--light-gray);
    color: var(--gray);
    border-top: 1px solid var(--gray);
    padding: 20px;
  }


  @import "tailwindcss/base";
  @import "tailwindcss/components";
  @import "tailwindcss/utilities";

  /* active classes */

  @layer utilities {
    .text-indent {
      text-indent: 1000rem;
    }
  }

  @layer base {

    *, **, *:before, *:after {
      @apply box-border
    }

    label {
      @apply font-bold mt-4 mb-2 text-gray-800;
      display: block;
    }

    select,
    [type="text"],
    [type="email"],
    [type="password"],
    [type="datetime-local"],
    .select, .text-input, .email-input, .password-input {
      @apply w-full p-2 rounded border border-gray-200 p-2 focus:outline-none focus:border-gray-500;
    }

    [type="submit"] {
      @apply bg-transparent focus:outline-none focus:ring focus:border-blue-darker;
      cursor: pointer;
      transition: background 0.3s, color 0.3s;
    }

    [type="checkbox"] {
      @apply border rounded;
    }

  }

  @layer components {
    .top-nav-button {
      @apply text-blue-darker hover:bg-blue-darker bg-blue-lightest hover:text-white px-3 py-2 rounded text-sm font-medium;
    }

    .top-nav-link {
      @apply text-blue-lightest hover:text-blue-lighter px-3 py-2 rounded-md text-sm font-medium focus:outline-none focus:ring focus:border-blue;
    }

    .active-nav {
      @apply bg-blue-lighter text-blue-darkest hover:text-blue-dark px-3 py-2 rounded text-sm font-medium;
    }

    .header-title {
      @apply text-lg font-bold text-gray-900;
    }

    .table-titles {
      @apply text-sm font-bold text-gray-900 px-2 py-2;
    }

    .textarea {
      @apply appearance-none w-full border border-gray-200 p-2 focus:outline-none focus:border-gray-500 rounded;
      height: 50vh;
    }

    .button {
      @apply border bg-blue-darker text-blue-lightest rounded-md px-4 py-2 transition duration-500 select-none hover:bg-blue focus:outline-none focus:ring focus:border-blue-darker;
      cursor: pointer;
    }

    .button--cta {
      @apply border-none bg-blue text-white rounded-md px-4 py-2 transition duration-500 select-none hover:bg-blue-dark focus:outline-none focus:ring focus:border-blue-darker;
      cursor: pointer;
    }

    .button--hollow {
      @apply border-2 border-blue-darker text-blue-darker rounded-md px-4 py-2 transition duration-500 select-none hover:bg-blue-lightest focus:outline-none focus:ring focus:border-blue-darker;
      cursor: pointer;
    }

    .button--secondary {
      @apply bg-blue-lightest text-blue-darker rounded-md px-4 py-2 transition duration-500 select-none hover:text-blue-dark hover:bg-blue-lighter focus:outline-none focus:ring focus:border-blue-darker;
      cursor: pointer;
    }

    .button--naked {
      @apply text-blue-darker rounded-md px-4 py-2 transition duration-500 select-none hover:bg-blue-lightest hover:text-blue-dark focus:outline-none focus:ring focus:border-blue-darker;
      cursor: pointer;
    }

    .button--warning {
      @apply bg-red-700 text-white rounded-md px-4 py-2 transition duration-500 select-none hover:bg-red-900 focus:outline-none;
      cursor: pointer;
    }

    .link--cancel {
      @apply text-red-700 underline transition duration-300 hover:text-red-900;
    }

    .highlight {
      @apply bg-yellow-100 transition duration-300 rounded-sm
    }

    .link-underline {
      @apply text-blue-darker shadow-link p-1 pb-0.5 pt-2 hover:text-blue-lightest hover:shadow-darklink;
      transition: all 0.1s;
    }

  }
}