@use 'global/common' as global;

/* ------------------------------
 パネル
------------------------------- */
.acms-panel {
  margin-bottom: 10px;
  border: 1px solid global.$acms-panel-black-border;
}

.acms-panel-header {
  padding: 10px;
  margin: 0;
  background-color: global.$acms-panel-black-bg;
  border-bottom: 1px solid global.$acms-panel-black-border;

  &,
  & a {
    color: global.$acms-panel-black-text-color;
  }
}

.acms-panel-body + .acms-panel-header {
  border-top: 1px solid global.$acms-panel-black-border;
}

//フォントサイズ
.acms-panel-header [class*='acms-icon'] {
  @include global.font-size(20);
}

.acms-panel-title {
  margin: 0;

  @include global.font-size(15);

  > a {
    color: inherit;

    &:hover {
      color: inherit;
      opacity: 0.6;
    }
  }
}

.acms-panel-body {
  padding: 10px;
  margin: 0;
}

.acms-panel-footer {
  padding: 10px;
  border-top: 1px solid global.$acms-color-gray50;
}

// info
.acms-panel-info {
  &.acms-panel {
    border-color: global.$acms-panel-info-border;
  }

  .acms-panel-header,
  .acms-panel-header a {
    color: global.$acms-panel-info-text-color;
    background-color: global.$acms-panel-info-bg;
    border-color: global.$acms-panel-info-border;
  }

  .acms-panel-footer {
    border-color: global.$acms-panel-info-border;
  }
}

// danger
.acms-panel-danger {
  &.acms-panel {
    border-color: global.$acms-panel-danger-border;
  }

  .acms-panel-header,
  .acms-panel-header a {
    color: global.$acms-panel-danger-text-color;
    background-color: global.$acms-panel-danger-bg;
    border-color: global.$acms-panel-danger-border;
  }

  .acms-panel-footer {
    border-color: global.$acms-panel-danger-border;
  }
}
