/* 12 step meeting list (tsml) general & filter controls */
#tsml {
  a {
    @extend a;
  }
  .page-header { margin: 20px 0; }
  .form-control {
    background-color: $input-bg;
    border: 1px solid $primary;
    &[disabled] {
      background-color: tint-color($input-bg, 10%);
      border: 1px solid shade-color($primary, 35%);
      &::-ms-clear,
      &::-ms-reveal { display: none; }
      &::-webkit-input-placeholder, /* WebKit, Blink, Edge */
      &:-ms-input-placeholder, /* Internet Explorer 10-11 */
      &::-ms-input-placeholder, /* Microsoft Edge */
      &::placeholder /* Most modern browsers support this now. */
      { 
        color:    shade-color($gray-200, 40%)    !important;
      }
      &:-moz-placeholder, /* Mozilla Firefox 4 to 18 */
      &::-moz-placeholder { /* Mozilla Firefox 19+ */
        color:    shade-color($gray-200, 40%)    !important;
        opacity:  1;
      }
  
    }
    &::-ms-clear,
    &::-ms-reveal { display: none; }
    &::-webkit-input-placeholder, /* WebKit, Blink, Edge */
    &:-ms-input-placeholder, /* Internet Explorer 10-11 */
    &::-ms-input-placeholder, /* Microsoft Edge */
    &::placeholder /* Most modern browsers support this now. */
    { 
      color:    shade-color($primary, 45%)    !important;
    }
    &:-moz-placeholder, /* Mozilla Firefox 4 to 18 */
    &::-moz-placeholder { /* Mozilla Firefox 19+ */
      color:    shade-color($primary, 45%)    !important;
      opacity:  1;
    }
  }

  & .btn, & .btn a {
    text-decoration: none !important;
  }

  .btn.btn-default, a.btn.btn-default {
    color: $spaceblue-800;
    background-color: $primary;
    border: 1px solid $primary;
    &:hover {
      // @extend .btn-primary, :hover;
      background-color: tint-color($primary, $btn-hover-bg-tint-amount) !important;
    }
    &.toggle-view {
      color: $primary;
      background-color: $dark;
      border: 1px solid $primary;
      &:hover {
        color: $pagination-hover-color;
        background-color: $pagination-hover-bg !important;
        border: 1px solid $primary;
      }
      &.active {
        color: $dark;
        background-color: $primary;
        border: 1px solid $primary;
        box-shadow: null !important;
        &:hover {
          color: $dark;
          background-color: tint-color($primary, $btn-hover-bg-tint-amount) !important;
          border: 1px solid $primary;
          box-shadow: null !important;
        }
      }
    }
  }

  .dropdown-menu {
    @extend .dropdown-menu;
    @extend .dropdown-menu-dark;
    .divider {
      background-color: $dropdown-dark-divider-bg;
    }
  }
  .dropdown-menu > li > a {
    @extend .dropdown-item;
    color: $gray-300 !important;
  }
  .dropdown-menu > li.active > a,
  .dropdown-menu > li.active > a:hover {
    color: $dropdown-dark-link-active-color !important;
    background-color: $dropdown-dark-link-active-bg !important;
  }
  .dropdown-menu > li > a:hover {
    color: $dropdown-dark-link-hover-color !important;
    background-color: $dropdown-dark-link-hover-bg !important;
  }

}

/* 12 step meeting list (tsml) main table & widget table styling */
section.tsml-widget-upcoming.widget_tsml_widget_upcoming.widget div.tsml-no-upcoming-meetings {
  color: $input-focus-color;
  // background-color: $input-bg;
  background-color: rgba(21,28,40,0.85);
  border-color: $input-border-color;
}
.tsml-widget-upcoming {
  h2 { margin-bottom: 1rem; }
  table.tsml_next_meetings {
    opacity: 0.90;
    tbody tr td {
      margin-left: .5rem;
      &:first-of-type {
        margin-left: 0 !important;
      }
    }
  }
}
#tsml #meetings .results table,
.tsml-widget-upcoming table.tsml_next_meetings {
  @extend .table;
  @extend .table-dark;
  @extend .table-striped;
  > * > * > * {
    padding: 0.5rem 0.5rem !important;
  }
  > tbody {
    > tr {
      background-color: var(--bs-table-bg);
      border-top: 1px solid $spaceblue-600 !important;
      &:nth-of-type(2n+1) {
        --bs-table-accent-bg: var(--bs-table-striped-bg);
        background-color: var(--bs-table-accent-bg);
      }
      &.attendance-online .location small {
        color: $success;
      }
      &.attendance-inactive .location small {
        color: $danger;
      }
      span.meeting_types {
        color: $secondary;
      }
    }
  }
}

#tsml .results {
  .alert-warning {
    color: $input-focus-color;
    background-color: rgba(21,28,40,0.85);
    border-color: $input-border-color;
  }
}


#tsml .page-header {
  border-bottom-color: $spaceblue-600 !important;
  border-bottom-style: dashed !important;
}


#tsml {

  .panel {
    border: 1px solid rgba(0, 0, 0, 0.125);
    background-color: shade-color($gray-800, 50%) !important;
    color: $body-color !important;
    &.panel-default {
      ul {
        &.list-group {
          background-color: shade-color($gray-800, 50%) !important;
          color: $body-color !important;
          li, a {
            &.list-group-item {
              background-color: shade-color($gray-800, 50%) !important;
              color: $body-color !important;
              border-color: $spaceblue-700 !important;
              &.meeting-info ul li hr {
                border-color: $spaceblue-300;
              }
              
              &.list-group-item-location {
                text-decoration: none !important;
                & .list-group-item-heading, & .location-address {
                  text-decoration: underline !important;
                }
                &:hover {
                  & .list-group-item-heading, & .location-address {
                    color: $primary;
                    text-decoration-color: $gray-200 !important;
                  }
                }
              }
            }
            .list-group-item-heading {
              color: $text-muted;
            }
          }
        }
      }
      .panel-heading {
        background-color: shade-color($gray-800, 50%) !important;
        .panel-title {
          background-color: inherit !important;
        }
      }
    }
  }

}


#tsml #meeting  a.btn.btn-default {
  color: $primary !important;
  background-color: inherit !important;
  margin-bottom: .5rem !important;
  border-radius: 0.2rem !important;
  padding: .25rem .5rem !important;
  font-size: .875rem !important;
  svg.icon {
    height: 1em;
    width: 1em;
    top: -0.15em;
    position: relative;  
  }
  &:hover {
    color: $spaceblue-800 !important;
    background-color: $primary !important;
  }
}

#tsml #meeting .panel.panel-expandable.expanded .panel-heading {
  border-color: $spaceblue-700 !important;
}

#tsml #meeting #feedback .panel .list-group .list-group-item button {
  color: $spaceblue-900 !important;
  background-color: $primary !important;
  border-color: $primary !important;
  border-bottom-left-radius: 0.2rem !important;
  border-bottom-right-radius: 0.2rem !important;
  padding: .25rem .5rem !important;
  font-size: .875rem !important;
  &:hover {
    background-color: tint-color($primary, $btn-hover-bg-tint-amount) !important;
  }
}